Jquery validation not validate multi select box in form

Question

I have two select box(dropdpwn) in my page. i validate my form using jQuery validation plugin but this plugin not validation two select box.

JS:

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

HTML :

<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="lastname">selectBox 1</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
           <select class="required form-control">
               <option value="0"></option>
               <option value="1">1</option>
               <option value="2">2</option>

            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="lastname">selectBox 2</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
           <select class="required form-control">
               <option value="0"></option>
               <option value="1">1</option>
               <option value="2">2</option>

            </select>
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

How do can fix this problem for each() selectbox.

DEMO : http://jsfiddle.net/hTPY7/1435

You are missing the equals sign, =, on all value attributes... value"0" is not correct. The broken syntax is even highlighted in your jsFiddle. — Sparky
– Sparky, Commented Jul 27, 2014 at 13:48

Sparky · Accepted Answer · 2014-07-27 14:19:12Z

1

1) You must have a unique name attribute on each element. This is a requirement of the jQuery Validate plugin.

2) The first option must have value="" and not value="0".

Working DEMO: http://jsfiddle.net/hTPY7/1436/

3) OP's demo is broken because he keeps using the same id twice. For valid HTML, every id must be unique on a page.

DEMO with ID: http://jsfiddle.net/hTPY7/1441/

edited Jul 27, 2014 at 14:19

answered Jul 27, 2014 at 14:05

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

4 Comments

user27133 Over a year ago

Sure You Right! please see my last update: i add id="test" to each select box. and i have this problem:This field is required. error not show in last select box.jsfiddle.net/hTPY7/1439

Sparky Over a year ago

@user27133, I have no idea what you're talking about. "This field is required" is properly shown on everything in my demo!

user27133 Over a year ago

your demo not complete! see this demo : jsfiddle.net/hTPY7/1439

Sparky Over a year ago

@user27133, Your demo is broken because you've duplicated the same id. id must be unique. In this case, you don't even need id... see my original demo.

Khalid · Accepted Answer · 2014-07-27 14:05:07Z

0

All you need to do is to add the name attribut to both select boxes and set the first option to no text and no value

<select name="s1" class="required form-control">
              ^--  Don't forget to add different names for both select
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

jsFiddle

edited Jul 27, 2014 at 14:05

answered Jul 27, 2014 at 13:15

Khalid

4,8285 gold badges29 silver badges50 bronze badges

7 Comments

Sparky Over a year ago

And nobody noticed the missing = in here: value"0"

user27133 Over a year ago

@Khalid: add missing = and id to select box. your code so not worked. jsfiddle.net/hTPY7/1435

user27133 Over a year ago

@Khalid: jsfiddle.net/hTPY7/1430 not work. you see :This field is required. error in last select box?

Khalid Over a year ago

@user27133 Check this jsFiddle jsfiddle.net/hTPY7/1437 and check my post to see the update

user27133 Over a year ago

@Khalid: in last select box you not add id="test1" and This field is required. error not show in last select box.jsfiddle.net/hTPY7/1439

|

Collectives™ on Stack Overflow

Jquery validation not validate multi select box in form

2 Answers 2

4 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related