CODEWITHSUNDEEP
jqueryjquery-validate
Frederik T
Frederik T

Reputation: 553

jQuery validation wont fire for dropdown/select lists

Yes this might be a duplicate of a million other questions like it, but for me it still doesnt work. According to the jQuery validation documentation, simply having the first default item with an empty value (value=""), and the class "required" is enough. But it refuses to work correctly. I have everything set up correctly, and it works fine on checkboxes, radiobuttons, text inputs no problem at all, but select lists? Nope.

Here is a simple example:

<select class="required" id="dayDropdown" data-bind="'value': StudentBaseData.day">
    <option value="">Dag</option>
</select>
<select class="required" id="monthDropdown" data-bind="'value': StudentBaseData.month">
    <option value="">Måned</option>
</select>
<select class="required" id="yearDropdown" data-bind="'value': StudentBaseData.year">
    <option value="">År</option>
</select>

Three dropdownlists, all required. Right here, the odd thing is ONLY the first select validates. The other two are ignored. Further down the page i have two more select lists that refuses any kind of validation.

Here is where i initiate the validation plugin:

$(function(){
    $.metadata.setType("attr", "validate");
    $("#StudentsForm").validate({
        ignore: ""
    });
});

And i force trigger the validation when the form is submitted:

$('#updateProfileButton').click(function subscribe() {
    if($("#StudentsForm").valid()=== true){ //force trigger validation
        // do stuff
    } else { // if jquery validation fails
        // TODO
    }
});

And like i said, it works for everything BUT select lists.

If it matters, the select lists are automatically populated by two javascript functions (filling out dates etc.), but the initial default value is set like i have shown above. The strange thing is it works for the first select box, and thats it.

I have searched and searched and i have never found anyone with the same problem.

PS: The "data-bind" is from knockout.js.

Upvotes: 1

Views: 1419

Answers (1)

ɴᴀᴛᴇ ᴅᴇᴠ
ɴᴀᴛᴇ ᴅᴇᴠ

Reputation: 4611

Add a name attribute to your dropdowns. This should fix the problem where you only see the first dropdown being shown as invalid.

Upvotes: 2

Related Questions