Remote validation rule for JQuery validation fails (using MVC 2)

Question

I have a field in my markup that I want to validate towards the server. My form currently looks like this:

<% using (Html.BeginForm()){ %>
  <%: Html.Serialize("regData", Model)%>
  <div class="RegistrationGroup">
    <p><label for="Account_Email">e-mail</label> <%: Html.EditorFor(x => x.Account.Email) %><span class="ErrorMessage"></span></p>
  </div>
<% } %>

Then in my jQuery script I have the following code:

$("form").validate({
  rules: {
    "Account.Email": {
      required: true,
      email: true
      remote: "Registration/ValidateEmail"
    }
  }
});

In my RegistrationController class, I have the following method:

public string ValidateEmail(string email)
{
  if (email.Contains("oek"))
    return "false";
  return "true";
}

So for testing, this should return false, and fail the validation if the e-mail address have "oek" somewhere inside it.

However, this does not work.

Without the remote part, the required and email rules work as they should, so I know that they are working.

When I add the remote rule, the following steps happen:

The method on the controller gets called as planned, with the e-mail address as it's parameter.
The return value from the method it intercepted inside the browser as true or false respectively ( I used Chrome's developers tools to control this).

But the validation does not work as planned at this point, and after the remote call is done, the required and email rules stop working as well. (it does not try to enforce the remote rule until the other rules have passed the validation, which is a good thing of course).

I have also tried to return a JsonResult with true or false, but to no avail.

What am I doing wrong here?

Darin Dimitrov · Accepted Answer · 2011-04-15 18:20:22Z

2

public ActionResult ValidateEmail(string email)
{
    if ((email ?? string.Empty).Contains("oek"))
    {
        return Json(false, JsonRequestBehavior.AllowGet);
    }
    return Json(true, JsonRequestBehavior.AllowGet);
}

also you are missing a comma after the email: true rule:

$('form').validate({
    rules: {
        'Account.Email': {
            required: true,
            email: true,
            remote: '@Url.Action("ValidateEmail", "Registration")'
        }
    }
});

or if this is a separate javascript file you could use HTML5 data-* attributes on the email field:

$('form').validate({
    rules: {
        'Account.Email': {
            required: true,
            email: true,
            remote: $('#Account_Email').data('remote-val-url')
        }
    }
});

UPDATE:

Full working example. Ensure that the email action parameter is correctly bound in the ValidateEmail action.

Model:

public class MyViewModel
{
    public MyViewModel()
    {
        Account = new Account();
    }
    public Account Account { get; set; }
}

public class Account
{
    public string Email { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }

    public ActionResult ValidateEmail(Account account)
    {
        if ((account.Email ?? string.Empty).Contains("oek"))
        {
            return Json(false, JsonRequestBehavior.AllowGet);
        }
        return Json(true, JsonRequestBehavior.AllowGet);
    }
}

View:

<script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>

<% using (Html.BeginForm()) { %>
    <label for="Account_Email">e-mail</label> 
    <%= Html.EditorFor(x => x.Account.Email) %>
    <span class="ErrorMessage"></span>
<% } %>


<script type="text/javascript">
    $('form').validate({
        rules: {
            'Account.Email': {
                required: true,
                email: true,
                remote: '<%= Url.Action("ValidateEmail", "Home") %>'
            }
        }
    });
</script>

edited Apr 15, 2011 at 18:20

answered Apr 15, 2011 at 13:30

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Øyvind Bråthen Over a year ago

@Darin - This didn't work for me. I changed the ValidateEmail to the returntype you mentioned above, but in Chrome it seems the same result is returned. So either just true or false as a plain string. The comma I forgot because the remote line is commented on my code, but nice catch :). However, changing the remote call to @Url.Action... causes the server method to never being called at all, so I had to revert it to "Registration/ValidateEmail". Shouldn't that work? The end result is the same. true or false is returned from the method, but the validation for the field fails.

Øyvind Bråthen Over a year ago

Is it that I'm using "Registration/ValidateEmail" that causes it to fail (even if I can see that the method is running, and returning it's value to the browser? This has been bugging me all day :(

Darin Dimitrov Over a year ago

@Øyvind Knobloch-Bråthen, please see my update for a full example. There might be an issue with the way the email value is received in your ValidateEmail action. Because the plugin will send it as ValidateEmail?Account.Email=xxx you need to perform correct model binding.

Øyvind Bråthen Over a year ago

@Darin - Thanks a lot for your effort, but the result is the same. I changed the ValidateEmail to use the ViewModel instead, and when debugging I can see that is receives the email, and returns true or false respectively. It's just that the validation in the browser does not seem to care about the result at all. Thanks for taking the time to help me. I think I will have to resort to writing a custom validator method, but it feels unnecessary when it should have worked out of the box. Thanks again for your time.

Øyvind Bråthen Over a year ago

@Darin - I found the answer to my problem now, and have added it as an answer to this question if you are curious. Sorry for wasting your time.

|

Øyvind Bråthen · Accepted Answer · 2011-04-16 21:57:30Z

0

I found the answer here at last, and it was not my code that was wrong, but the jQuery.Validate plugin version.

I used the Validate plugin that shipped with Visual Studio 2010, and I have upgraded jQuery from version 1.4.1 to 1.5.1 in the same project. The problem is that the Validate plugin that ships with Visual Studio 2010 (version 1.6) is not compatible with jQuery 1.5.1. It mostly is, but not the Ajax based functionality.

So updating jQuery.Validate to 1.8 solved the problem.

answered Apr 16, 2011 at 21:57

Øyvind Bråthen

60.9k28 gold badges128 silver badges154 bronze badges

Collectives™ on Stack Overflow

Remote validation rule for JQuery validation fails (using MVC 2)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related