jQuery Validation help
I have the following code which does validation on a number of different forms throughout my website, however NOT ALL forms have validation. When a user submits a form the ShowModal()
function should run BUT NOT if any validation errors have happened. The validation works fine but the modal doesn't show at all. Can anyone help? Thanks.
var newpost_validator = {};
var editpost_validator = {};
var newupload_validator = {};
var editupload_validator = {};
var newquestion_validator = {};
var editquestion_validator = {};
var comment_validator = {};
$(function()
{
newpost_validator = $("#newpostform").validate({
rules: {
post_title: "required",
post_url: {
required: {
depends: function() {
return $('input[name=post_category]:checked').val() == '14';
}
},
url: true
},
post_code: {
required: {
depends: function() {
return $('input[name=post_category]:checked').val() == '13';
}
}
},
post_content: "required",
post_tags: "required"
},
messages: {
post_title: "Your post MUST have a title",
post_url: "Please enter a valid URL, don't forget the http://",
post_code: "Please add your code",
post_content: "Your post MUST have some content",
post_tags: "Please add some tags"
}
});
editpost_validator = $("#editpostform").validate({
rules: {
post_title: "required",
post_content: "required"
},
messages: {
post_title: "Please enter a title",
post_content: "Please enter the content"
}
});
newquestion_validator = $("#newquestionform").validate({
rules: {
post_title: "required",
post_content: "required",
post_tags: "required"
},
messages: {
post_title: "Please enter a title",
post_content: "Please enter the content",
post_tags: "Please enter some tags"
}
});
editquestion_validator = $("#editquestionform").validate({
rules: {
post_title: "required",
post_content: "required"
},
messages: {
post_title: "Please开发者_如何学编程 enter a title",
post_content: "Please enter the content"
}
});
newupload_validator = $("#newuploadform").validate({
rules: {
post_title: "required",
post_upload: {
required: true,
accept: "jpg|jpeg|gif|bmp|png"
},
post_content: "required",
post_tags: "required"
},
messages: {
post_title: "Please enter a title",
post_upload: "Please upload a valid image file",
post_content: "Please enter the content",
post_tags: "Please enter some tags"
}
});
editupload_validator = $("#edituploadform").validate({
rules: {
post_title: "required",
post_content: "required"
},
messages: {
post_title: "Please enter a title",
post_content: "Please enter the content"
}
});
comment_validator = $("#commentform").validate({
rules: {
comment: "required"
},
messages: {
comment: "Please add a comment"
}
});
$('form').submit(function()
{
var bFlag = true;
if (newpost_validator.numberOfInvalids() > 0)
{
bFlag = false; HideModal();
}
if (editpost_validator.numberOfInvalids() > 0)
{
bFlag = false; HideModal();
}
if (newquestion_validator.numberOfInvalids() > 0)
{
bFlag = false; HideModal();
}
if (editquestion_validator.numberOfInvalids() > 0)
{
bFlag = false; HideModal();
}
if (newupload_validator.numberOfInvalids() > 0)
{
bFlag = false; HideModal();
}
if (editupload_validator.numberOfInvalids() > 0)
{
bFlag = false; HideModal();
}
if (comment_validator.numberOfInvalids() > 0)
{
bFlag = false; HideModal();
}
if(bFlag)
{
ShowModal();
}
});
});
Besides everything people here replied 1 more thing that could help you is adding the submitHandler to your validation object
comment_validator = $("#commentform").validate({
rules: {
comment: "required"
},
messages: {
comment: "Please add a comment"
},
submitHandler: function(form) {
// form.submit();
// you can set a flag to true here
// instead of doing it on the last submit
// then fire your modal function where you simply test for this flag
// matching true
}
});
By default, the form submission is prevented when the form is invalid, and submitted as normal when it is valid. You can handle the submission manually by using submitHandler like on the example above.
to further help you i think you can set a global variable, then check on your last call
function everythingOk(){
var bFlag = true;
if (
newpost_validator.numberOfInvalids() > 0
||
editpost_validator.numberOfInvalids() > 0
||
newquestion_validator.numberOfInvalids() > 0
||
editquestion_validator.numberOfInvalids() > 0
||
newupload_validator.numberOfInvalids() > 0
||
editupload_validator.numberOfInvalids() > 0
||
comment_validator.numberOfInvalids() > 0
){
bFlag = false;
}
if(bFlag){
ShowModal();
}else{
HideModal();
}
};
now you gotta keep in mind that if you add the submitHandler to the validation checks your everythingOk function will be run N amount of times which means it could check as OK twice for that you might want to add an extra step, all around i think your application needs a little bit more planning, i think i would make every validation set a different flag as true then check if all the different flags are true, or check why you want multiple forms on the same page, why not combine them?
Hope this helps
精彩评论