Jquery validating a specific form on a page with multiple forms

Question

Some suggestions or advice please. I'm trying to validate a multi-form page but I'm not sure how to specify the form in jquery selector:

<form id="form_a">
    <label>First Name</name><input type="text" class="required"><br>
    <label>Email</label><input type="text" class="required">
<button onclick="validate('form_a')">Submit</button>
</form>

<form id="form_b">
    <label>Serial No </name><input type="text" class="required"><br>
    <label>Brand </label><input type="text" class="required">
<button onclick="validate('form_b')">Submit</button>
</form>

<form id="form_c">
    <label>First Name</name><input type="text" class="required"><br>
    <label>Email</label><input type="text" class="required">
<button onclick="validate('form_c')">Submit</button>
</form>

<script>
function validate(whichform) {

    $(whichform+" .required").each(function(i){
        if ($(this).val().indexOf() < 0){
        alert("null value detected")
        $(this).css("border","1px solid red")
        }
    });

}
</script>

Arun P Johny · Accepted Answer · 2014-02-27 04:39:39Z

1

In your caase you are passing the id to the method, but you are not using the id selector, also you will have to return false from the event handler if you want to prevent the submission of the form

<button onclick="return validate('form_c')">Submit</button>

so

function validate(whichform) {
    var valid = true;
    // whichform is the id so use id selector here
    $('#' + whichform + " .required").each(function (i) {
        if ($(this).val().length == 0) {
            alert("null value detected")
            $(this).css("border", "1px solid red")
            valid = false;
        } else {
            $(this).css("border", "")
        }
    });
    //return the valid state
    return valid;
}

Demo: Fiddle

But a more jQuerish solution will be is to use jQuery event handlers like

<form id="form_a">
    <label>First Name</label>
    <input type="text" class="required" />
    <br/>
    <label>Email</label>
    <input type="text" class="required" />
    <button>Submit</button>
</form>

then

jQuery(function () {
    $('form').submit(function () {
        var valid = true;
        // whichform is the id so use id selector here
        $(this).find(".required").each(function (i) {
            if ($(this).val().length == 0) {
                alert("null value detected")
                $(this).css("border", "1px solid red")
                valid = false;
            } else {
                $(this).css("border", "")
            }
        });
        //return the valid state
        return valid;
    })
})

Demo: Fiddle

edited Feb 27, 2014 at 4:39

answered Feb 27, 2014 at 2:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Quaking-Mess Over a year ago

strange with the first one. I'm able to get inside validate function with an alert() test but then I'm not getting inside $('#' + whichform + " .required").each( I have an alert() test inside this function but alert() test isn't isn't triggering. I don't think it likes this selector. I'm trying to replicate your jsfiddle and see what's the problem...

Arun P Johny Over a year ago

@Quaking-Mess sorry I didn't get you... what do you mean

Arun P Johny Over a year ago

@Quaking-Mess can you confirm whether the attached fiddle sample is working

Quaking-Mess Over a year ago

sorry I've fixed it. I forgot to add class="required" to my input fields. It's working fine now! Thank you Arun. You're very thorough :)

Arun P Johny Over a year ago

@Quaking-Mess I would recommend using the second method

|

rakhi4110 · Accepted Answer · 2014-02-27 02:49:12Z

1

Try this.

$(document).ready(function(){
    $("button").click(function(e){
        e.preventDefault();
        $(this).parent().children('.required').each(function(){
            if ($(this).val().indexOf() < 0){
                alert("null value detected");
                $(this).css("border","1px solid red");
            }
        });
    });
});

And remove the onclick="" from your html. As a best practice, try to avoid inline Javascript. Fiddle

edited Feb 27, 2014 at 2:49

answered Feb 27, 2014 at 2:43

rakhi4110

9,2812 gold badges33 silver badges49 bronze badges

1 Comment

Quaking-Mess Over a year ago

This is interesting. I think this is the best method. Just let JQuery do all the searching for elements. No need to identify forms and id's I would have gone with this too as it's the shortest method.

Collectives™ on Stack Overflow

Jquery validating a specific form on a page with multiple forms

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related