Question

Now I know this sounds elementary, but I honestly can’t dial this in. I have two forms on a single page. I wrote some form validating functions that are triggered as such:

$("form").submit(function(event) {
    event.preventDefault();
    checkRequired();
    checkLengths();
    checkFormats();
    checkErrors();
});

This is awesome, but inside the functions, I cannot use $(this) to identify the <form> from which the submit button was clicked.

Let’s say I wrote alert($(this).attr('id')); in the checkRequired() function. It alerts “Object, object“.

If I place the same code inside the $("form").submit() function, it returns my form’s id.

The selectors inside the functions are things like $("input[type='text']") and similar, but the functions run on all the inputs, not just the ones in the form that was submitted.

Sample function() used:

function checkFormats() {

    alert("Checking Formats...");

    $(".email").each(function(){

        alert("Checking Formats: Email...");

        var emailField = $(this).children("input[type='text']");
        var strEmail = emailField.val();

        if( strEmail.indexOf( "@" ) == -1 ) {
            alert("What the hell?");
        }

    });

}

I’m sure I’ll feel dumb when I hear the solution, but hey, I’m overly-tired lol… Thanks in advance!

Thinking maybe $("form",this) may get me somewhere?

Answer 1

Can you not pass the form to the methods?

$("form").submit(function(event) {
    event.preventDefault();
    checkRequired(this);
    checkLengths(this);
    checkFormats(this);
    checkErrors(this);
});

Then you have the right context.
You can now select any additional elements within the context of the specified form, similar to this::

function checkFormats(theForm) {
    $form = $(theForm);

    alert("Checking Formats...");
    
    // Get emails from within the context of the current form.
    $(".email", $form).each(function(){

        alert("Checking Formats: Email...");

        var emailField = $(this).children("input[type='text']");
        var strEmail = emailField.val();

        if( strEmail.indexOf( "@" ) == -1 ) {
            alert("What the hell?");
        }

    });
}

---

Alternative – Use JavaScript .apply

(As mentioned by Mike Robinson in the comments)

---

$("form").submit(function(event) {
    event.preventDefault();
    checkRequired.apply(this);
    checkLengths.apply(this);
    checkFormats.apply(this);
    checkErrors.apply(this);
});

Then this within the function becomes the form. You can now use it like this:

function checkFormats(theForm) {
    $form = $(this);

    alert("Checking Formats...");
    
    // Get emails from within the context of the current form.
    $(".email", $form).each(function(){

        alert("Checking Formats: Email...");

        var emailField = $(this).children("input[type='text']");
        var strEmail = emailField.val();

        if( strEmail.indexOf( "@" ) == -1 ) {
            alert("What the hell?");
        }

    });
}

---

DEMO – Using .apply

---

Demo uses a simple HTML From:

<form>
    <button type="submit">submit</button>
</form>

With this script:

$("form").submit(function (event) {
    event.preventDefault();
    checkRequired.apply(this);
});

function checkRequired() {
    alert("This is of type: " + this.nodeName);
}