jQuery events help

I have this code:

$('form').submit(function()
{
    if (newpost_validator.numberOfInvalids() > 0)
    {
        HideModal();
    }
    else
    {
        ShowModal();
    }
});

The idea is that it checks if an validation issues have happened when a form is submitted and if none then show a modal box. However I want to check multiple forms as this code is sitting inside a parent JS file. So for example:

$('form').submit(function()
{
    if (newpost_validator.numberOfInvalids() > 0)
    {
        HideModal();
    }
    if (newcomment_validator.numberOfInvalids() > 0)
    {
        HideModal();
    }
    else
    {
        ShowModal();
    }
});

BUT that wouldn't work because even though newpost may be valid, the newcomment will not because it's not 开发者_运维知识库being used! Therefore I can't write my code this way. I thought about duplicating the function for each instance but that's not feasible either.

Any ideas on how I could do multiple checks on forms without confliction? I need the selector to stay as just form because some forms don't have validation and I want to make all forms show the modal on submit.

Thanks.

use a variable for the checking like below.

$('form').submit(function()
{
    var bFalg = true;
    if (newpost_validator.numberOfInvalids() > 0)
    {
        bFlag = false;
        HideModal();
    }
    if (newcomment_validator.numberOfInvalids() > 0)
    {
        bFlag = false;
        HideModal();
    }

    if(bFlag)
    {
        ShowModal();
    }
});

It seems that you should always hide modal when there are any invalids. So why don't you just add them all together and see if there're any? Like this:

if ((x.numberOfInvalids() + y.numberOfInvalids() + ... + z.numberOfInvalids()) > 0)
{
    HideModal();
}
else
{
    ShowModal();
}

If all of these x..z are related to actual FORM elements then you should maybe consider writing a jQuery plugin that does validation of all of them, because it will be universally usable.

Example:

$("form").numberOfInvalids()

In both cases it all depends on your numberOfInvalids() validation functionality. Maybe you're doing it all wrong. Because submit event will only fire on one form and you should always validate that particular form and not others. So referring to form validators as newpost_validator isn't the best solution.

A different approach

What you could do is attach particular validators to your input fields that need validation like:

<input type="text" validate="\d+" name="Id" /> <!-- should be numeric -->

and then go through your form that's submitting data and validate those fields:

$("form").sumbit(function(){

    var isValid = true;

    $(this).find("[validate]").each(function() {
        var element = $(this);
        isValid &= validate(element.val(), element.attr("validate"));
        return isValid;
    });

    if (isValid === true)
    {
        ShowModal();
    }
    else
    {
        HideModal();
    }

});

This will only validate those inputs that are part of the form being submitted. validate attribute is anything you define. I've shown an example of providing a regular expression that will validate input's value (functionality's not provided afterwards but it's enough to make you think of a solution and approach).

This will also work for any form whether you define those custom attributes or not. When they're present they will be validated and when there's none, everything will work as expected. And it will always validate just the fields of the form being submitted and ignore the rest.