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'

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'

• javascript
• jquery
• jquery-validate

• @Sparky I replaced the HTML with the rendered one from Chrome. – davidf Commented Jul 3, 2014 at 13:47
• Firstly, I don't believe you can toggle this behavior by adding and removing the ignore class. The class needs to be there all along. Secondly, HTML5 Validation is always disabled by the jQuery Validate plugin. – Sparky Commented Jul 3, 2014 at 14:01
• @Sparky When I add the ignore class to these fields in my html, jQuery still tries to validate them. I'm kinda confused there.. – davidf Commented Jul 3, 2014 at 14:12
• I don't think you should need to specify :hidden in the selector since the element does not appear to be hidden. Try: ignore: '.ignore' ~ See: jqueryvalidation/validate/#ignore – Sparky Commented Jul 3, 2014 at 14:15
• Aww snap. That's pretty much it. Either '.ignore' or '.ignore, :hidden' do the job. Things can be so easy. Thank you so much! – davidf Commented Jul 3, 2014 at 14:20

1 Answer 1

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.