title: Start and end date custom validation in jQuery
body: <p>I want to add custom validation (only in one view) for two @Html.EditorFor date inputs so that the start date would have to be less than or equal to the end date. This is my code:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      @Html.LabelFor(model =&gt; model.DateFrom)
      @Html.EditorFor(model =&gt; model.DateFrom, new { htmlAttributes = new { @class = "form-control", @id = "StartDate", @required = "required" } })
      @Html.ValidationMessageFor(model =&gt; model.DateFrom, "", new { @class = "text-danger" })
  
      @Html.LabelFor(model =&gt; model.DateTo)
      @Html.EditorFor(model =&gt; model.DateTo, new { htmlAttributes = new { @class = "form-control", @id = "EndDate", @required = "required" } })
      @Html.ValidationMessageFor(model =&gt; model.DateTo, "", new { @class = "text-danger" })
  &lt;/div&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function () {
          $("#StartDate").add("#EndDate").change(function () {
              if ($("#StartDate").val() &gt; $("#EndDate").val() &amp;&amp; $("#StartDate").val().length != 0 &amp;&amp; $("#EndDate").val().length != 0) {
                  alert($("#StartDate").val());
                  $("#EndDate")[0].setCustomValidity('Invalid Range');
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I expect to add a validator that will display my custom message with @ Html.ValidationMessageFor if the date range would be incorrect and it will set any of inputs as invalid (thus blocking form submit). I tried setCustomValidity () but it doesn't work (nothing happens). What am I doing wrong?</p>