0

How can the JQuery.validator be used with rules that do ajax requests when jQuery 1.10 or greater is used. jQuery 1.10 doesn't support the async = false option anymore. Hence the jQuery.validator rule finishes before the ajax result in the success-callback arrives.

This old post (when asyn=false wasn't deprecated) suggests the us of that option: jQuery validator and a custom rule that uses AJAX

I am using the jQuery.validator in the context of a asp.net MVC 5.2 application

Community
  • 1
  • 1
rherzog
  • 51
  • 9
  • Are you doing client validation by doing a request to the server? Seems kinda pointless to me. Validate client data on the client and all of the validation on the server. What does your custom validator do? – heymega Jan 06 '16 at 17:31
  • Can you use the remote method or is there more to your method than merely having a server method return back the result? http://jqueryvalidation.org/remote-method – stephen.vakil Jan 06 '16 at 20:14
  • I need to check if the entered E-Mail address has not been used. The client validation is triggered, when data is input and not when the form is submitted. Hence the user gets feedback immediately. I need to check if the remote methode can be used instead. – rherzog Jan 06 '16 at 21:03
  • We are using the remote method in that exact scenario (to check if an entered email is in use once they tab out of the email field). However, we don't use unobtrusive validation so it could differ depending on your usage. – stephen.vakil Jan 06 '16 at 21:09
  • I wanted a custom ValidationAttribute and use it like the built-in Attributes on the ViewModel e.g. [Required] or [EmailAddress]. stephen.vakil are you talking about the [Remote] attribute as described [here](https://msdn.microsoft.com/en-us/library/gg508808(VS.98).aspx)? Anyway the [Remote] attribute works as I need it to! Thanks! – rherzog Jan 07 '16 at 08:03

1 Answers1

1

The solution is to use the MVC standard validation attribute [Remote] in combination with a conroller that handles those client-side validation requests.

The solution is entirely based on this Microsoft article.

A quick sum-up:

  1. Annotate your ViewModel property with the [Remote] attribute specifying the controller and get action to be called:

    [Required]
[Display(Name = "E-Mail")]
[EmailAddress]
[System.Web.Mvc.Remote("EMail_Available", "Validation")]
public string Email { get; set; }

  2. Create a Controller which has output-caching disabled:

    [OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
public class ValidationController : Controller
{
    public ValidationController() {}

   // GET: Validation
   [AllowAnonymous]
   public async Task<JsonResult> EMail_Available(string EMail) {

     var user = await UserManager.FindByEmail(EMail);
     if (user == null)
        return Json(true, JsonRequestBehavior.AllowGet);

     string suggestedUID = String.Format(CultureInfo.InvariantCulture,
        "Die E-Mail '{0}' wurde bereits registriert.", EMail);

     return Json(suggestedUID, JsonRequestBehavior.AllowGet);
   }
}

  3. In your Razor view provide a @Html.ValidationMessageFor(...)

    <div class="form-group">
   @Html.LabelFor(m => m.Email, new { @class = "col-md-4 control-label" })
   <div class="col-md-8 input-group">
       <span class="input-group-addon colorLogin"><span class="glyphicon glyphicon-envelope" id="spaces"></span></span>
       @Html.TextBoxFor(m => m.Email, new { @id = "register_email", @class = "form-control", @placeholder = "E-Mail", @autofocus = "" })
       @Html.ValidationMessageFor(m => m.Email, "", new { @id = "register_email_error", @class = "text-danger" }, "div")
   </div>
</div>
rherzog
  • 51
  • 9