jquery - Required Field Validation only when field is visible in asp.net mvc

Question

I have a checkbox where you can hide/show a datepicker field.

But when the datepicker field is hidden there has to be no validation.

This is the checkbox:

  @Html.CheckBox("showEindDatum", (Request.Form["showEindDatum"] ?? string.Empty).Contains("true"))

And this is the datepicker:

   @FormGroupHelper.CreateFormGroup(Html, m => m.EindDatum, Html.Kendo().DatePickerFor(m => m.EindDatum).Min(Model.EindDatum.HasValue ? Model.EindDatum.Value : DateTime.Today).Format("dd-MM-yyyy").ParseFormats(new string[] { "ddMMyyyy" }))

The properties of this fields are looking like this:

 [Display(Name = "Einddatum wijziging")]
        [Required(ErrorMessageResourceType = typeof(Messages), ErrorMessageResourceName = "Global_Validatie_VeldVerplicht")]
        public DateTime? EindDatum { get; set; }

 public bool showEindDatum { get; set; }

And this is the jquery of it:

if ($('#showEindDatum').prop('checked')) {

            $(".EinddatumDatepicker").show();
            $("#meldingEindDatumCheck").show();

        }
        else {
            $(".EinddatumDatepicker").hide();
            $("#meldingEindDatumCheck").hide();
        }

        $("#showEindDatum").on("click", function ()
        {
            $(".EinddatumDatepicker").toggle(this.checked);
            $("#meldingEindDatumCheck").toggle(this.checked);

        });

So what I have to change that there is no validation when the datepicker field is hidden?

Thank you

So you mean this:

 $.validator.setDefaults({ ignore: null });

        if ($('#showEindDatum').prop('checked')) {

            $(".EinddatumDatepicker").show();
            $("#meldingEindDatumCheck").show();
            $("#geenEinddatumIngevuld").hide();

        }
        else {
            $(".EinddatumDatepicker").hide();
            $("#meldingEindDatumCheck").hide();
            $("#geenEinddatumIngevuld").show();

        }

        $("#showEindDatum").on("click", function () {           
            $(".EinddatumDatepicker").toggle(this.checked);
            $("#meldingEindDatumCheck").toggle(this.checked);
            $("#geenEinddatumIngevuld").toggle(this.checked);

        });

this doesn't work.

But the form has also a post method, like this:

using (Html.BeginForm("Formulier", "PersoneelsDossier", FormMethod.Post, new { @id = "PDForm", name = "PDForm" }))
}

You mean like this:

 $(document).ready(function () {

        //$("#PDForm").data("validator").settings.ignore = ".ignore, :hidden";     

        if ($('#showEindDatum').prop('checked')) {

            $(".EinddatumDatepicker").show();
            $("#meldingEindDatumCheck").show();
            $("#geenEinddatumIngevuld").hide();

        }
        else {
            $(".EinddatumDatepicker").hide();
            $("#meldingEindDatumCheck").hide();
            $("#geenEinddatumIngevuld").show();

        }

        $("#showEindDatum").on("click", function () {           
            $(".EinddatumDatepicker").toggle(this.checked);
            $("#meldingEindDatumCheck").toggle(this.checked);
            $("#geenEinddatumIngevuld").toggle(this.checked);

        });

        $.validator.setDefaults({ ignore: null });

 });

You mean like this:

$.validator.setDefaults({ ignore: null });

        if ($('#showEindDatum').prop('checked')) {

            $(".EinddatumDatepicker").show();
            $("#meldingEindDatumCheck").show();
            $("#geenEinddatumIngevuld").hide();

        }
        else {
            $(".EinddatumDatepicker").hide();
            $("#meldingEindDatumCheck").hide();
            $("#geenEinddatumIngevuld").show();

        }

        $("#showEindDatum").on("click", function () {           
            $(".EinddatumDatepicker").toggle(this.checked);
            $("#meldingEindDatumCheck").toggle(this.checked);
            $("#geenEinddatumIngevuld").toggle(this.checked);

        });

Doesn't work

Answer 1

By default jQuery validate ignores hidden fields, elements with zero width and height, those with css display:none and any elements with an invisible parent (using same criteria).

The ignore setting can however be overridden by adding the following script

// By default validator ignores hidden fields.
// change the setting here to ignore nothing
$.validator.setDefaults({ ignore: null });