Call MVC 3 Client-side validation manually for ajax messages

Question

I am building an MVC 3 web application. I want to use Data Annotations for my entity class and then use unobtrusive client-side validation before sending a message back to the server. This works fine when creating a regular message. I get validation and a check summary if any of the fields is invalid. However, I want to publish information through ajax and json. How can I manually check the form on the client side and then return the ajax message to the server. Below is a summary version of my code.

public class Customer { [Required(ErrorMessage = "The customer first name is required.")] public string FirstName { get; set; } [Required(ErrorMessage = "The customer last name is required.")] public string LastName { get; set; } } <% using (Html.BeginForm()) { %> <%: Html.LabelFor(model => model.FirstName, "First Name")%> <%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%> <%: Html.ValidationMessageFor(model => model.FirstName, "*")%> <%: Html.LabelFor(model => model.LastName, "Last Name")%> <%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%> <%: Html.ValidationMessageFor(model => model.LastName, "*")%> <div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;"> <a href="#">Save</a> </div> <%: Html.ValidationSummary(true) %> <% } %> 

I tried this code, but it only checks the first name and does not display a check summary.

  $("#CustomerEditSave").click(function () { $(form).validate(); //Ajax call here }); 

Answer 1

Try:

 //using the form as the jQuery selector (recommended) $('form').submit(function(evt) { evt.preventDefault(); var $form = $(this); if($form.valid()) { //Ajax call here } }); //using the click event on the submit button $('#buttonId').click(function(evt) { evt.preventDefault(); var $form = $('form'); if($form.valid()) { //Ajax call here } }); 

This should work with jQuery ajax and MSAjax calls. You can also try using http://nuget.org/packages/TakeCommand.js or https://github.com/webadvanced/takeCommand it will automatically handle this for you.

Answer 2

I fucked with MVC client side validation for several days:

Do not use .click use.submit:

 $("#MyForm").on('submit',function () { if($("#MyForm").valid()) { //Do ajax stuff } //Return false regardless of validation to stop form submitting //prior to ajax doing its thing return false; }); 

I am going to add an update to this, consider canceling the event rather than returning false (or doing both):

 $("#MyForm").on('submit',function (e) { if($("#MyForm").valid()) { //Do ajax stuff } e.preventDefault(); //Return false regardless of validation to stop form submitting //prior to ajax doing its thing return false; }); 

Answer 3

At least in my case (MVC 5) it was necessary to add the following code, otherwise .valid() will always return true:

 $(function () { $(document).ajaxComplete(function(event, request, settings){ //re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled $.validator.unobtrusive.parse(document); }); 

});

See http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/

Answer 4

IMPORTANT!!:

Paul's decision is the correct answer to the question, not Dr. Rob.

Although you can just use valid () instead of validate (). form ().

But more importantly, there really is no reason to limit your code, as suggested by Dr. Rob, i.e. not .click and use only .submit. This is not what solved the problem! What solved the problem was to end the call to $ .ajax (...) in the if statement. I.e:

 if($("#MyForm").valid()) { //call to $.ajax or equivalent goes in here. } 

I think this needs to be clarified, as otherwise the real answer to the problem is confusing.

Answer 5

$ (YourForm) .data ('unobtrusiveValidation'). Confirmations ()

Answer 6

  if(!$('#myform').data('unobtrusiveValidation').validate()) { // add your extra custom logic } else { $('#myform').submit(); } 

It starts the validation and returns a boolean, so you can verify it before sending.

Answer 7

.Valid () works. that is, he tells you if your form is valid. However, this alone does not help to show AND hide messages correctly. here is my manual check method

 function validate() { //valid() not only tells us whether the form is valid but //also ensures that errors are shown !!! if ($("form").valid()) { //if the form is valid we may need to hide previously displayed messages $(".validation-summary-errors").css("display", "none"); $(".input-validation-error").removeClass("input-validation-error"); return true; } else { //the form is not valide and because we are doing this all manually we also have to //show the validation summary manually $(".validation-summary-errors").css("display", "block"); return false; } } 

Answer 8

 I tried all of the above solutions but none worked on MVC5. 

I am using jQuery v2.1.4 and jQuery.Validation v1.11.1. I need to activate validation during page rendering. Only below me worked.

 $(document).ready(function () { ... validateForm(); } function validateForm() {`enter code here` var elem = document.getElementById('btnSave'); elem.click(); } $('#btnSave').click(function (evt) { //evt.preventDefault(); var form = $('form'); if (form.valid()) { //Ajax call here } //$(".validation-summary-errors").css("display", "block"); }); function Validate() { // If no group name provided the whole page gets validated Page_ClientValidate(); }