jQuery UI Dialog with Form Validation Plugin
Solution 1
I solved a similar issue in 3 steps:
-
Attaching the validator to the form:
$('#your-form-id').validate();
-
When the Save button of your modal form is clicked, submit the form (the validator will be triggered):
buttons: { "Save": function() { $('#your-form-id').submit(); },
-
Move the submit logic to the validator submitHandler:
$('#your-form-id').validate({ submitHandler: function(form) { // do stuff } });
Solution 2
The validators validate
function simply sets up validation, it does not trigger it. The triggering is done automatically when the form is submitted or when a field gets written in. Try adding your validation code to the open
event:
$("#addEventDialog").dialog("open");
$("#addEventDialog").dialog({
open: function() {
$("#interestForm").validate({
...
});
}, ...
Solution 3
I know this question is old. But this one came first when I was searching for this particular problem. So I think this may help others. At last managed to achieve this.
please see http://jsfiddle.net/536fm/6/
Solution 4
I had the same issue using jQuery Dialog plugin (http://jqueryui.com/dialog/) with jQuery Validator plugin(http://jqueryvalidation.org/). The problem is that the jQuery-UI dialog does not append to the form, it appends just before </body>, so the elements to validate are outside the <form></form> section.
To solve this issue i add the "open" attribute on the Dialog initialization. Inside this attribute i add a function that wraps my Dialog div element inside a form element and then initialize the validator.
Also, i add the "close" attribute on the Dialog initialization. Inside this attribute i add a function that unwraps the form i wrapped on the open event and resets the validator.
A simple example,
<script type="text/javascript">
var validator;
$(document).ready(function () {
$("#dialog-id").dialog({
autoOpen: false,
resizable: true,
width: 450,
modal: true,
// Open event => wraps the Dialog source and validate the form.
open: function (type, data) {
$(this).wrap("<form id=\"form-id\" action=\"./\"></form>");
validator = $("#form-id").validate();
},
// Close event => unwraps the Dialog source and reset the form to be ready for the next open!
close: function (type, data) {
validator.resetForm();
$(this).unwrap();
},
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Create": function () {
validator.form();
}
}
});
</script>
Some html for the above javascript,
<div id="dialog-id" title="Thematic Section">
<div class="form_description">
Create a thematic section for a conference type.
</div>
<ul style="list-style-type:none;">
<li>
<label class="description" for="conferencetype_id">Conference Type:</label>
<div>
<select id="conferencetype_id" name="conferencetype_id" style="width:150px;">
<option value="1" selected="selected">Type-1</option>
<option value="2" selected="selected">Type-2</option>
</select>
</div>
</li>
<li>
<label class="description" for="title">Title:</label>
<div>
<input id="title" name="title" type="text" maxlength="100" value="" style="width:350px;" required/>
</div>
</li>
</ul>
</div>
Solution 5
Try something like this. Put your form validate stuff outside dialog script or i guess the open callback would work as well.
buttons : {
"Cancel" : function() {
$(this).dialog('close');
},
"Submit" : function() {
var isValid = $("#yourForm").valid();
if(isValid) {
var formData = $("#yourForm")serialize();
// pass formData to an ajax call to submit form.
}
return false;
}
},
Comments
-
Justin almost 2 years
I am currently using the bassistance validation plugin for my forms. And I am using a pop-up modal dialog box to house a form that needs to be validated, but for some reason it isn't calling my form... all of my ID's and references are working and I still don't any success.
Perhaps someone can shed some light for me. Here is my Javascript code.
$("#addEventDialog").dialog("open"); $("#addEventDialog").dialog({ title: 'Add Event', modal: true, buttons: { "Save": function() { $("#interestForm").validate({ submitHandler: function(form) { $("#calendarWidget2").ajaxSubmit({ target: "#calendarResponse", dataType: 'json', beforeSubmit: function () { $('input[type=submit]').attr("disabled", true); $("#calendarResponse").show('slow'); }, success: function(response, event) { if(response.status == true) { $('input[type=submit]').attr("disabled", false); $("#calendarResponse").delay(5000).fadeOut('slow'); //If the widget says it's okay to refresh, refresh otherwise, consider it done if(response.refreshEvents == '1') { $("#calendar").fullCalendar("refetchEvents"); } // Close the dialog box when it has saved successfully $("#addEventDialog").dialog("destroy"); // Update the page with the reponse from the server $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); } else { $("#calendarWidget2").validate(); $("#calendarResponse").append("ERROR: "+ response.status +"<br />"); } }, error: function() { alert("Oops... Looks like we're having some difficulties."); } }); } }); }, "Cancel": function() { $(this).dialog("close"); } } });
-
Seeker over 11 yearsThanks it helped me a lot :)!!
-
Seeker over 11 yearsThanks it helped me as well :)
-
eh1160 about 11 yearsNice! Another option is to use the jquery on() method to listen for the dialog's dialogopen event:
$("<parent to addEventDialog>").on( "dialogopen", function(event, ui) { $("#interestForm").validate(); } );