Disable Client Side validation on a button click – ASP.NET MVC

ASP.NET MVC we use client side validation using jQuery.validate plugin, which will be based on Model – Data Annotation validation attributes.

In some cases we might want to disable such validation on a button click wherever it is not needed.

For example:

The below code block will register validation block for Title property in the Model, will result in client side validations fired when user click on button.

<span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">="editor-field"</span><span class="kwrd">&gt;</span>
          @Html.EditorFor(model =<span class="kwrd">&gt;</span> model.Title)
          @Html.ValidationMessageFor(model =<span class="kwrd">&gt;</span> model.Title)
     <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
&lt;input type=<span class="str">"submit"</span> name=<span class="str">"backButton"</span> <span class="kwrd">value</span>=<span class="str">"Back"</span> title=<span class="str">"Go back to Prev step." /&gt;</span>

We can disable the client side validation check for a button using the “disableValidation=true” attribute for the button.

&lt;script type=<span class="str">"text/javascript"</span>&gt;
  document.getElementById(<span class="str">"backButton"</span>).disableValidation = <span class="kwrd">true</span>;
&lt;/script&gt;

OR

&lt;input type=<span class="str">"submit"</span> name=<span class="str">"backButton"</span> <span class="kwrd">value</span>=<span class="str">"Back"</span> 
 title=<span class="str">"Go back to Prev Step"</span> disableValidation=<span class="str">"true"</span> /&gt;

OR

You disable client-side validation on a button by adding the css style class “cancel” to it.

That will look like below example:

&lt;input type=<span class="str">"submit"</span> name=<span class="str">"backButton"</span> <span class="kwrd">value</span>=<span class="str">"Back"</span>
 title=<span class="str">"Go back to Prev Step"</span> <span class="kwrd">class</span>=<span class="str">"mybtn-style cancel"</span> /&gt;

These are the different ways you can disable the client side validations. Hope it was helpful.