0

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>
Quaking-Mess
  • 505
  • 4
  • 12
  • 23

2 Answers2

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

rakhi4110
  • 9,253
  • 2
  • 30
  • 49
  • 1
    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. – Quaking-Mess Feb 27 '14 at 03:50
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

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531