How can I conditionally disable client-side validation of some fields ?

Here is the example of what I need to do:

• user writes name and address and submits.
• Both are validated both server and client side. If validation passes e-mail is send to given address and (name, address) pair is stored.
• as a response same page is displayed (I don't want redirect!) this time with confirmation. User can retype their name and submit. In such case e-mail will be resend to the address that corresponds to given name.

It does not work because: client side validation will not pass when user clicks resent button on the second (confirmation screen). It would say that e-mail is required even if there is no field for it. How can I disable javascript validating email before the confirm page gets send to user ?

Example ASP.NET MVC page

<%if (Model.Confirm == false){ %>
    <% using (Html.BeginForm()) { %>
        Your email: <%: Html.EditorFor(m => m.Email) %>
        Your name: <%: Html.EditorFor(m => m.Name) %>
        <input type="submit" value="Send Email" />
    <% } %>
<%} else{ %>
    The e-mail was send! You can write your name and click button to resend it.
    <% using (Html.BeginForm()) { %>
        Your name: <%: Html.EditorFor(m => m.Name) %>
        <input type="submit" value="Resend me email again" />
    <% } %>
<% } %>

In the model both Email and Name are required field to enforce client side validation.

Example controller actions

 public ActionResult Index(){
     return new MyModel {Confirm = false;}
 }

 [HttpPost]
 public ActionResult Index(MyModel model){
     if(DataHelper.isKnown(model.Name)){
         //send e-mail to the address corresponding to name in database 
     }
     if(!ModelState.IsValid) {
         return View(model);
     }
     //Send e-mail to address in email
     //store pair name->email to database
     model.Confirm = true;
     return View(model);
 }

How can I conditionally disable client-side validation of some fields ?

Here is the example of what I need to do:

• user writes name and address and submits.
• Both are validated both server and client side. If validation passes e-mail is send to given address and (name, address) pair is stored.
• as a response same page is displayed (I don't want redirect!) this time with confirmation. User can retype their name and submit. In such case e-mail will be resend to the address that corresponds to given name.

It does not work because: client side validation will not pass when user clicks resent button on the second (confirmation screen). It would say that e-mail is required even if there is no field for it. How can I disable javascript validating email before the confirm page gets send to user ?

Example ASP.NET MVC page

<%if (Model.Confirm == false){ %>
    <% using (Html.BeginForm()) { %>
        Your email: <%: Html.EditorFor(m => m.Email) %>
        Your name: <%: Html.EditorFor(m => m.Name) %>
        <input type="submit" value="Send Email" />
    <% } %>
<%} else{ %>
    The e-mail was send! You can write your name and click button to resend it.
    <% using (Html.BeginForm()) { %>
        Your name: <%: Html.EditorFor(m => m.Name) %>
        <input type="submit" value="Resend me email again" />
    <% } %>
<% } %>

In the model both Email and Name are required field to enforce client side validation.

Example controller actions

 public ActionResult Index(){
     return new MyModel {Confirm = false;}
 }

 [HttpPost]
 public ActionResult Index(MyModel model){
     if(DataHelper.isKnown(model.Name)){
         //send e-mail to the address corresponding to name in database 
     }
     if(!ModelState.IsValid) {
         return View(model);
     }
     //Send e-mail to address in email
     //store pair name->email to database
     model.Confirm = true;
     return View(model);
 }

• javascript
• asp
• asp-mvc
• validation
• client-side-validation

4 Answers 4

Just a simple solution for this, I will hide the email field for the second confirmation and preserve its value.

<%} else{ %>
    The e-mail was send! You can write your name and click button to resend it.
    <% using (Html.BeginForm()) { %>
        <%: Html.HiddenFor(m => m.Email) %>
        Your name: <%: Html.EditorFor(m => m.Name) %>
        <input type="submit" value="Resend me email again" />
    <% } %>
<% } %>

Why don't you use 2 different views? You don't have to redirect. I think you are violating the SRP here. That view is serving more than one purpose.

public ActionResult SubmitEmail(Model model)
{
     if(!emailWasSent)
        return View("FirstView");
     else
        return View("ConfirmationView");
}

That way the first view can have client-side validation and the second view can not opt in for it and do as it wishes.

I think, here it is either none or all issue. So you need to disable client validation for that view and manually check the controls to be validated. (off the top of my head).

EDIT: If I wanted to do manual client-side validation, I would use jQuery, since it is so straight-forward in such tasks.

When the "disabled" attribute is added to the element, it is possible to exclude it from the client side validation.

Disabling Client Side Validation For Disabled Input Controls In ASP.NET MVC - Imran Baloch's Blog