Jquery validating a specific form on a page with m

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>

Answer 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

Answer 2

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