CODEWITHSUNDEEP
jqueryhtmlformsvalidationjquery-selectors
delliottg
delliottg

Reputation: 4140

Form selector for multi-form page

I've got a page with half a dozen forms on it. I'm using jQuery 2.02, JQM 1.3.1 as well as jQuery Validate 1.12.0 with the additional methods add-on to try to validate the forms. I'm trying to use this selector to grab the relevant form when the user clicks on the submit button:

$('[id^=formEvent_]').validate({

which works great...for the first form encountered in the HTML (formEvent_assign, see fiddles below), in other words it always selects the first form no matter which form the user actually used.

I've tried 

$('[id^=formEvent_]').closest('form').validate({

Setting a variable for the form EG:

var formPointer = "formEvent_terminate";
$('#' + formPointer).validate({

as well as:

var formPointer = "#formEvent_terminate";
$(formPointer).validate({

none of which work, as well as several other things I've found on SO. I've been struggling with this for hours and it seems like a simple thing. I can see in console.log that the right form object is being created, and I can see it's children (all the inputs), etc., but the selector doesn't allow validation to run.

What selector should I use so I can have the Submit button from the individual forms run validation properly?

Here's a list of seemingly pertinent SO questions I've read and tried, but ended up not being able to get to work for one reason or another:

Jquery validating a specific form on a page with multiple forms

this input submit selector with closest form submit

Javascript/jQuery: Why different result for event.target using tag Vs. other Elements in console.log, alert() with $(this) in mind

Here's the full validation code & call to the submit routine if the form is valid:

$('[id^=formEvent_]').validate({
    submitHandler: function ( form, event) {
        isFormValid( form, event );
    },
    rules: {
        pcbid_assign: {
            required: true,
            digits: true,
            rangelength: [3, 6]
        },
        pcbid_terminate: {
            required: true,
            digits: true,
            rangelength: [3, 6]
        },
        input_reason_terminate: {
            required: true
        },
        input_assign_sbeJobNumber: {
            require_from_group: [1, ".assign_group"]
        },
        input_assign_sbeModelNumber: {
            require_from_group: [1, ".assign_group"]
        },
        input_assign_sbePN: {
            require_from_group: [1, ".assign_group"]
        },
        input_assign_sbeSerialNumber: {
            require_from_group: [1, ".assign_group"]
        }
    },
    messages: {
        pcbid_assign: "Please enter a valid PCBID with 3-6 digits.",
        input_assign_sbeJobNumber: "Please enter a valid job number.",
        input_assign_sbeModelNumber: "Please enter a valid model number.", 
        input_assign_sbePN: "Please enter a valid part number.",
        input_assign_sbeSerialNumber: "Please enter a valid serial number.",
        pcbid_terminate: "Please enter a valid PCBID with 3-6 digits.",
        input_reason_terminate: "Please enter a reason for this PCBID board's termination."
    }
});

Here are a couple of fiddles that exhibit the expected behavior (because they only have a single form in each):

Assign with validation

Terminate with validation

Upvotes: 0

Views: 263

Answers (2)

kosmos
kosmos

Reputation: 4288

did you try with .each() method? Something like $('[id^=formEvent_]').each(function() { $(this).validate({....

Upvotes: 1

scunliffe
scunliffe

Reputation: 63578

If the submit button is inside the form you can use this simple "vanilla" JavaScript.

<input type="submit" value="Submit" onclick="$(this.form).validate();"/>

this.form will always get you the containing form.

Upvotes: 1

Related Questions