jQuery validation - Display error message for each field

Question

Take a look at the jsfiddle. When I enter wrong data in two inputs and clicking submit, I only receive the error message on the first one. Now I want two of them which have the name attribute in the form displayed as well.

In this example, I use the same name on purpose to get these values on the backend easier. I just loop through the list and get all information.

Zahid Riaz · Accepted Answer · 2012-09-19 04:01:33Z

2

You are doing it wrong. You have added same name for both fields. Same name attributes are used to combine the fields in a group. You have to use class based validation.

answered Sep 19, 2012 at 4:01

Zahid Riaz

2,8893 gold badges30 silver badges38 bronze badges

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

2 Comments

Tzu ng Over a year ago

actually, I use the same name on purpose which is getting information easier on the back end. If I change to using class based - ( use $.each ?, tell me if I'm wrong ). A group of fields will be added at run time so I have to bind the validate for them ? ( a group may have 6 fields )

Zahid Riaz Over a year ago

Yes you are wrong. class based validation doesn't need $.each. its quite simple. if you could see the validation plugin demo. Its fairly simple. and its the best choice if you have dynamically added fields

Tats_innit · Accepted Answer · 2012-09-19 04:00:46Z

1

working demo http://jsfiddle.net/xr5g6/1/

Hope it fits your needs. :)

code

$("form").validate({
    rules: {
        number: {required: true, range: [1,2]},
        number2: {required: true, range: [1,2]}
    }
});

html

<form name="myForm">
<fieldset>
<legend>My Form</legend>
    <label for='number'>Number</label>
    <input name='number'class='required'/> <br />
    <label for='number'>Number</label>
    <input name='number2' class='required'/>
    <label for='change-range'>Max range</label>
    <input name='change-range' class='required'/>
</fieldset>
<input type="submit">
</form>

answered Sep 19, 2012 at 4:00

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Comments

Danil Speransky · Accepted Answer · 2012-09-19 04:00:50Z

0

You should use different name attriburtes for different inputs.

Demo: http://jsfiddle.net/xYTNw/

answered Sep 19, 2012 at 4:00

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

Collectives™ on Stack Overflow

jQuery validation - Display error message for each field

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related