Preventing jquery validation on a select field

Question

I have a hidden field, date of birth and use the following jQuery plugin to create 3 dropdowns.

https://github.com/IckleChris/jquery-date-dropdowns

This give the following source.

<label class="control-label" for="Applicant_DateOfBirth">Date of Birth</label>
<span class="field-validation-valid" data-valmsg-for="Applicant.DateOfBirth" data-valmsg-replace="true"></span>

<div class="date-dropdowns">
<select class="day selectdob valid ignore" name="date_[day]" data-val="false" aria-invalid="false">
<option value="">Day</option>
<option value="01">01</option>
<option value="02">02</option>
....
</select>

** pseudo code to show additional select fields within div **
<select for month>
<select for year>

<input class="invisible valid" data-val="true" data-val-required="Please enter your date of birth" id="Applicant_DateOfBirth" name="Applicant.DateOfBirth" type="text" value="" aria-required="true" aria-describedby="Applicant_DateOfBirth-error" aria-invalid="false">
</div>

I have tried setting the validation onclick, onkeyup and onfocusout all to false and also set the data-val to false as suggested here:

Preventing jquery validation on drop down bound to int?

Unfortunately the validation is still triggered upon any change of the select fields.

The jQuery plugin only updates the hidden field when a valid selection of all 3 select fields is made, so I am sure this is not the issue.

Anyone able to suggest how to disable validation on the select fields but keep the validation on the input field

Note the input field is not hidden for debug purposes.

I am using jQuery validate + unobtrusive with MVC .Net 4.6

I did try the ignore, but again this did not prevent the validation of the select fields.

Current validate call:

 $(form).validate({
onclick: false,
onkeyup: false,
onfocusout: false,
ignore: ".ignore"
});

Image to show validation trigger on first select field change, end field is the Applicant.DateOfBirth input which will be hidden.

Assuming you're using the jQuery validate plugin, set the ignore selector: jqueryvalidation.org/validate/#ignore — Rory McCrossan
Your validation is for empty value? you can try $("input").dateDropdowns({ required: true }); — CMedina
Thanks for the ignore suggestion, did try that but to no sucess — Steve H

Salman Mirza Salman Mirza · Accepted Answer · 2017-03-28T12:58:02

Here is the simplest way to prevent validate selected fields,select etc

simply add the name of field and mark it as required:false,

rules: {
            NameOfField: {
            required:false, // false will not give permission to this for validation
            },

        },

Preventing jquery validation on a select field

1 Answers