Remote
The System.Web.Mvc.RemoteAttribute maps to the remote validation method in jQuery Validation.
Here's the model, note that the EmailAddress
attribute decorates the sole property on the model:
using System.Web.Mvc; namespace jQuery.Validation.Unobtrusive.Native.Demos.Models { public class RemoteModel { [Remote("RemoteSimple", "Demo")] public string SimpleErrorMessage { get; set; } [Remote("RemoteServerErrorMessage", "Demo")] public string ServerErrorMessage { get; set; } } }
Here's the view (which uses the model):
@model jQuery.Validation.Unobtrusive.Native.Demos.Models.RemoteModel @using (Html.BeginForm()) { <div class="row"> @Html.LabelFor(x => x.SimpleErrorMessage, "Default error message demo. Only text that begins with the letter \"A\" can be entered:") @Html.TextBoxFor(x => x.SimpleErrorMessage, true) </div> <div class="row"> @Html.LabelFor(x => x.ServerErrorMessage, "Server error message demo. Only text that begins with the letter \"B\" can be entered:") @Html.TextBoxFor(x => x.ServerErrorMessage, true) </div> <div class="row"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-info">Reset</button> </div> }
Here's the (relevant parts) of the controller. Note the different endpoints for each remote validation:
using System; using System.Web.Mvc; using jQuery.Validation.Unobtrusive.Native.Demos.Models; namespace jQuery.Validation.Unobtrusive.Native.Demos.Controllers { public class DemoController : Controller { // ... public JsonResult RemoteSimple(string SimpleErrorMessage) { return Json(SimpleErrorMessage.StartsWith("a", true, null), JsonRequestBehavior.AllowGet); } public JsonResult RemoteServerErrorMessage(string ServerErrorMessage) { return Json((ServerErrorMessage.StartsWith("b", true, null) ? "true" : ServerErrorMessage + " does not begin with \"b\" and this message was sent back from the server as a result..."), JsonRequestBehavior.AllowGet); } // ... } }
Here's the HTML that the view generates. If you look closely at the data-rule-remote
attributes you can see the JSON used to drive the AJAX request. In this example there are 2 properties, url
and additionalfields
. As you may have guessed url
specifies the controller endpoints to hit to perform remote validation. The additionalfields
property is a hangover from the default MVC unobtrusive implementation. If we wanted we could strip this out, but since it does no harm it's been left behind for now.
<form action="/Demo/Remote" method="post"> <div class="row"> <label for="SimpleErrorMessage">Default error message demo. Only text that begins with the letter "A" can be entered:</label> <input data-msg-remote="'SimpleErrorMessage' is invalid." data-rule-remote="{"url":"/Demo/RemoteSimple","additionalfields":"*.SimpleErrorMessage"}" id="SimpleErrorMessage" name="SimpleErrorMessage" type="text" value="" /> </div> <div class="row"> <label for="ServerErrorMessage">Server error message demo. Only text that begins with the letter "B" can be entered:</label> <input data-msg-remote="'ServerErrorMessage' is invalid." data-rule-remote="{"url":"/Demo/RemoteServerErrorMessage","additionalfields":"*.ServerErrorMessage"}" id="ServerErrorMessage" name="ServerErrorMessage" type="text" value="" /> </div> <div class="row"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-info">Reset</button> </div> </form>
Here's the JavaScript that initialises the validation:
$("form").validate({ submitHandler: function (form) { alert("This is a valid form!"); } });