CODEWITHSUNDEEP
jqueryjquery-validate
Trant
Trant

Reputation: 3609

Bug in jQuery validate script with last elements?

I am struggling with jQuery validate script where I have a form with many elements makred required and it seems to ignore the very last one - unless I focus in it before submit. I created a much simpler example which replicates the problem below:

http://jsfiddle.net/nzRqZ/

<form id="testForm">
    <label>Type:</label>
    Sample Text 1: <input type="text" class="required"/><br>
    Sample Text 2: <input type="text" class="required"/><br>
    <button type="button" id="submitButton">Submit</button>
</form>
$(document).ready(function() {
    var validator = $('#testForm').validate({

    });

    $("#submitButton").click(function() {
        if (validator.form()) {
            alert("Validation passed");
        } 
    });    
});

Just open the page and press Submit button right away, you will see it puts the validation error only on the first element. Then enter something into the first input but dont touch the second one and hit Submit again. It will pass validation! Even though I have required on both of them!

Upvotes: 1

Views: 76

Answers (1)

laymanje
laymanje

Reputation: 833

It is not a bug, it is just documented that it needs the name attribute. But every input should have a unique name anyway.

For the validate plugin to work properly each input needs the name attribute.

<form id="commentForm">
     <label>1</label><input name="1" type="text" class="required"/><br/>
     <label>2</label><input name="2" type="text" class="required"/><br/>
     <label>3</label><input name="3" type="text" class="required"/><br/>
     <label>4</label><input name="4" type="text" class="required"/><br/>
     <button type="submit" id="submitButton">Submit</button>
</form>

Here is a fiddle.

http://jsfiddle.net/VbWLU/

Upvotes: 1

Related Questions