问题
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");
}
}
});
回答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 } });
回答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({
...
});
}, ...
回答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/
回答4:
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;
}
},
回答5:
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>
来源：https://stackoverflow.com/questions/4453072/jquery-ui-dialog-with-form-validation-plugin