Validate.unobtrusive and check jQuery libraries

Question

I am creating an MVC 3 application that uses standard model validation attributes for basic client and server validation. I also have a form that is in the header and uses the jQuery validation plugin to validate the client.

When I add an unobtrusive library to the project, the header form that uses the validation plugin does not start and continues to publish. When the unobtrusive library is not enabled, the header checks for a penalty, but then the model check stops.

Any idea what I'm doing wrong?

Edit

Basically, I have a header entry form. I also have a login page that also allows you to log in. The login page is related to the model, but the form in the header is not, it's just html. Both forms name the same controller / action through jQuery.ajax.

I lost the ability to use the .ajax method, which just doesn't seem to be called, as I included an unobtrusive library.

I got the code that you turned on to work, but then I still can’t post a message or perform an action after checking is complete.

My title form:

<form id="frmHeaderLogin" action=""> <table id="LoginBox" title="Login"> <tr> <td>UserName</td> <td><input type="text" id="Username" name="Username" /></td> </tr> <tr> <td>Password</td> <td><input type="password" id="Password" name="Password" /></td> </tr> <tr> <td colspan="2"><input type="submit" value="Login" id="btnHeaderLogin" name="btnHeaderLogin" /></td> </tr> </table> </form> 

I have a click event for a submit button that will validate client input and then it passes it to the server after creating the JSON object as a data parameter. The response from the server is also a JSON object. This form is in the layout file as it will be on every page.

The main login / browse page has a simple form as shown below:

 @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "MainLoginForm" })) { <div> <fieldset> <p style="color:Red;font-size:medium">@ViewData["Message"]</p> <legend>Login</legend> <div class="editor-label"> @Html.LabelFor(m => m.UserName, "EmailId") </div> <div class="editor-field"> @Html.TextBoxFor(m => m.UserName) @Html.ValidationMessageFor(m => m.UserName) </div> <div class="editor-label"> @Html.LabelFor(m => m.Password, "Password") </div> <div class="editor-field"> @Html.PasswordFor(m => m.Password) @Html.ValidationMessageFor(m => m.Password) </div> <p> <input type="submit" id="btnMainLogin" value="Login" /> </p> </fieldset> </div> } 

This is also a jQuery click event that fires the .ajax method and sends a JSON object to the server, as described above. Both instances return a JSON object.

I assume that at this point the question may arise: can I use the same model to enter the header, which is in the layout file, which will allow me to use client and server verification?

Below is an example submitHandler that I used after validation validation (using jquery.validate)

  $("#formname").validate( { // ..... // ..... submitHandler: function () { var JSONData = new Object(); $(':text, :password', $("table[id$='LoginBox']")).each(function () { JSONData[$(this).attr("id")] = $(this).val(); }); $.ajax({ type: "POST", url: "/Controller/Action", data: "{'Login': '" + JSON.stringify(JSONData) + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (result) { var response = $.parseJSON(result); alert("Header Login Success!"); }, error: function (xhr, status, error) { alert(xhr.statusText + " - ReadyState:" + xhr.readyState + "\n" + "Status: " + xhr.status); } }); } )}; 

Answer 1

If you want to mix Microsoft's unobtrusive script validation with custom jquery validation rules that you wrote on the same page, you will need to add jquery validation rules to existing form elements. Take an example:

 public class MyViewModel { [Required] public string Foo { get; set; } public string Bar { get; set; } } 

Controller:

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

View:

 @model MyViewModel <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Bar').rules('add', { required: true, messages: { required: 'Bar is required' } }); }); </script> @using (Html.BeginForm()) { <div> @Html.EditorFor(x => x.Foo) @Html.ValidationMessageFor(x => x.Foo) </div> <div> @Html.EditorFor(x => x.Bar) @Html.ValidationMessageFor(x => x.Bar) </div> <button type="submit">OK</button> } 

Note that the required attribute in the Foo field makes it mandatory, and we have defined a custom jquery validation rule for the Bar field.

And here is the result when the form is submitted, and 2 fields are left blank:

Of course, you can define any number of custom rules in any field.