jQuery Validation plugin ignored elements get validated
javascript, jquery, jquery-validate
Solution
`ignore: ".ignore :hidden"` is telling it to ignore hidden fields with the class `ignore`.
`ignore: ".ignore"` will tell it to only ignore fields will class `.ignore`.
`ignore: ".ignore, :hidden"` will tell it to ignore fields will class `.ignore` AND fields that are hidden.
Without specifying the `ignore` option at all, the default is `ignore: ":hidden"` where it will only ignore hidden fields.
Setting to `ignore: []` tells the plugin to ignore nothing and validate everything.
Problem
I validate a form with tje jQuery Validation Plugin. If the browser supports the HTML5 datetime-local element I want that input not to be validated. Everything works fine, except that the elements with the ignore class still get validated. HTML in Chrome (with datetime-local support) ``` <form action="/Events/EditEventInfo/37" id="EditForm" method="post" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden" value="bg5O93sGSgPSWzzsaMfKzd0FPWddBBw9ZYC4srs5xBWmJgsBKWjmD2TL0OXyQNwGl1fa7orAp08pCL1RLxzlSdbNWc9YUxxd1rxGrpw0fhgINRnd3vXoCzG5bDhe2ySk77kXfCfyEJvy-uvYRIbA8Q2"> <div class="form-horizontal"> <div class="form-group"> <label for="StartDate" class="control-label col-md-2">Startdatum</label> <div class="col-md-10"> <input id="StartDate" name="StartDate" class="form-control ignore error" type="datetime-local" required="" aria-required="true" aria-invalid="true"><label id="StartDate-error" class="error" for="StartDate">Bitte geben sie ein Datum im Format 'dd.MM.yyyy HH:mm' an.</label> </div> </div> <div class="form-group"> <label for="EndDate" class="control-label col-md-2">Enddatum</label> <div class="col-md-10"> <input id="EndDate" name="EndDate" class="form-control ignore error" type="datetime-local" required="" aria-required="true"><label id="EndDate-error" class="error" for="EndDate">Bitte geben sie ein Datum im Format 'dd.MM.yyyy HH:mm' an.</label> </div> </div> <div class="form-group"> <label for="Name" class="control-label col-md-2">Name</label> <div class="col-md-10"> <input id="Name" name="Name" class="form-control valid" value="Party. Yolo." type="text" minlength="2" required="" aria-required="true"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Speichern" class="btn btn-default"> </div> </div> </div> ``` Script: ``` <script type="text/javascript"> $.validator.addMethod( "deDateTime", function (value, element) { //dd.MM.yyyy HH:mm var re = /^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}$/; return (this.optional(element) && value == "") || re.test(value); }, "Bitte geben sie ein Datum im Format 'dd.MM.yyyy HH:mm' an." ); if (DateTimeLocalSupport()) { $('#StartDate').val("@Model.StartDate.ToString("s")"); $('#EndDate').val("@Model.EndDate.ToString("s")"); //HTML5 input types are available, no need to validate those fields $('#StartDate').addClass("ignore"); $('#EndDate').addClass("ignore"); } else { $('#StartDate').val("@Model.StartDate.ToString("dd.MM.yyyy HH:mm")"); $('#EndDate').val("@Model.EndDate.ToString("dd.MM.yyyy HH:mm")"); } $('#EditForm').validate({ ignore: ".ignore :hidden", rules: { StartDate: { deDateTime: true }, EndDate: { deDateTime: true } } }); alert("Valid: " + $('#EditForm').valid()); </script> ``` Checking for HTML5 support, populating the fields and adding classes works fine. Only does the validation plugin still validate the elements its not supposed to. Solution: ``` ignore: '.ignore, :hidden' ```