Using jQuery Validation with an Ajax Submitted jQuery UI Dialog
Quick tip.
Utilizing jQuery plugins in your project can greatly increase your productivity. However, it isn't always obvious how best to use them in unison.
Recently, I needed to combine the jQuery UI Dialog, jQuery Validation Plugin, and jQuery Ajax.
The jQuery Validation Plugin has a built in hook which allows you to assign a function that will trigger the validation event for a given form:
var v = jQuery("#form").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#result"
});
}
});
Unfortunately, this method won't work with the jQuery UI Dialog. The work around is to manually trigger the validation of the form from within the function that handles the dialog's "Ok" button:
$('#div').dialog({
buttons: {
"Ok": function() {
var options = {
success: showResponse,
url: '/submit/',
type: 'post',
dataType: 'json',
};
// Manually trigger validation
if ($("#form").validate().form() == true) {
$('#form').ajaxSubmit(options);
}
}
}
});
Add your comment
No HTML. Line breaks and URLs will automatically be converted.
Comments
Can you please post all the necessary code to make this example work? I'm not able to have successful validation in a jquery ui dialog.
Thanks,
Kris
I don't think this method works when you have a remote validation rule. For some reason, the remote validation request doesn't get returned until AFTER the call to
$("#form").validate().form()
It appears the problem I described above is not local to this situation, but is in fact a problem with remote validation in general.
It has to do with the fact that the current remote validation is asynchronous.
A bugfix is documented here:
http://old.nabble.com/%28validation%2...
Great guidelines. Thanks!
http://markonzo.edu http://blog.bakililar.az/helzbergdiam... http://jguru.com/guru/viewbio.jsp?EID... http://aviary.com/artists/Prilosec-pr... tanaka http://discuss.tigweb.org/thread/81341 http://bbs.chinafoods.cn/User/4608/Pr... http://www.mydogspace.com/me/keno http://aviary.com/artists/Adjustable-... deleted
It is interesting. I hope i can put this cod in my aplication.
thanks for all the great data i love it
I like this article.