Mvc3 - ajax form validation and server side validation

Question

I am sure that this has already been asked, but I am trying to solve all the proposed solutions, but none of these solutions solves my problem. I guess I do not implement it correctly.

I am using MVC3, razor, jQuery.

I have a new user registration form. After successful registration, I want to display a successful message (another type of registration) in the dialog box.

If there is an error with ModelState, then ModelState.IsValid == false, I want to display errors in ValidationSummary.

View

function OnBegin () { alert('begin'); return $('form').validate().form(); } function OnSuccess () { alert('success'); DisplaySucess()} function OnFailure () { alert('failure'); } function DisplaySuccess() { var typeOfRegistration = $('input:radio[name=RegistrationType]:checked').val(); var msg; if (typeOfRegistration == 0) { msg = "You are successfully enrolled for Algebra classes."; } if (typeOfRegistration == 1) { msg = "You are registered with your email address. Someone would contact you with an email."; } if (typeOfRegistration == 2) { msg = "Thank you for filling up this form. One welcome packet would be delivered with in next 15 days"; } msg = msg.replace(/\n/g, '<br />'); $('#dialog').html(msg); $('#dialog').dialog('open'); } 

 @model Models.RegistrationModel @using (Ajax.BeginForm("NewRegistration", "Account", new AjaxOptions() { OnBegin="OnBegin", OnSuccess = "OnSuccess", OnFailure = "OnFailure" })) { @Html.ValidationSummary() <div> Register<br /> @Html.RadioButton("RegistrationType ", "0", true) New Algebra class<br /> @Html.RadioButton("RegistrationType ", "1") New user registration by email<br /> @Html.RadioButton("RegistrationType ", "2") New user registration by mailing address<br/> ..some more types </div> <div> …here I display/hide controls based on Registration type selected. <div> @Html.LabelFor("UserName") @Html.TextBox("UserName")</div> } 

controller

 public ActionResult NewRegistration(RegistrationModel model) { if (Request.IsAjaxRequest()) { if (!ModelState.IsValid) { //Ques: How do I display this in ValidationSummary. return Json(new object[] { false, "Contains Email Address", ModelState.GetAllErrors() }); } else { if (UserNameIsTaken){ //Ques: This does not show in ValidationSummary ModelState.AddModelError("_FORM", "This username is already taken. Please pick a different username."); } } } else if (!ModelState.IsValid) { return View(model); } } 

Model

 public class RegistrationModel: IValidatableObject { [Required] //this gets displayed in ValidationSummary as Client-side validation public string UserName { get; set; } .. and all fields here } public IEnumerable<ValidationResult> Validate(ValidationContext context) { if (!string.IsNullOrEmpty(UserName) && UserName.Contains(EmailAddress)) { yield return new ValidationResult("Username cannot contain email address", new[] { "UserName" }); } } 

Web.config has

UnobtrusiveJavaScriptEnabled = "true" and ClientValidationEnabled = "true"

.js included

script src = "@ Url.Content (" ~ / Scripts / jquery-1.7.1.min.js ")" type = "text / javascript">

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

script src = "@ Url.Content (" ~ / Scripts / jquery.validate.unobtrusive.min.js ")" type = "text / javascript">

script src = "@ Url.Content (" ~ / Scripts / jquery.unobtrusive-ajax.min.js ")" type = "text / javascript">

What am I missing here? Any alternative? Thanks in advance.

Answer 1

I think that the placement of the vía ajax form will lead to errors on the client side.

Server-side errors should be returned via Json and then “inserted” into vja jQuery markup or plain javascript.

Here you can see and download a fully working example.

Answer 2

In the main file (layout.cshtml) write the following links:

 <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.4.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script> 

In web.config set "false" to "true":

 <appSettings> <!--<add key="ClientValidationEnabled" value="true"/> (enable this when client-side validation is needed) --> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings> 

In the model:

 public class ValidUserNameAttribue : ValidationAttribute { public override bool IsValid(object value) { return (value != null && value.ToString() == "Bob"); } } public class Customer { [ValidUserNameAttribue(ErrorMessage = "please type user name as Bob")] /* for server side validation*/ public string UserName { get; set; } } 

In the controller:

 public class HomeController : Controller { [HttpGet] public ActionResult Index() { return View(new ValidationModel()); } [HttpPost] public ActionResult Form(ValidationModel validationModel) { return PartialView(!ModelState.IsValid ? "Partial/_Form" : "Partial/_Success", validationModel); } } 

Index Type:

 @model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel @{ ViewBag.Title = "ajax form submit and server side validation"; } <div id="FormContainer"> @Html.Partial("Partial/_Form") </div> 

Type of form:

 @model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel @using (Ajax.BeginForm("Form", new AjaxOptions() { UpdateTargetId = "FormContainer" , OnSuccess = "$.validator.unobtrusive.parse('form');" })) { <p> @Html.ValidationMessageFor(m => m.UserName) // (Error Message) </p> <p> @Html.LabelFor(m => m.UserName): @Html.EditorFor(m => m.UserName) </p> <input type="submit" value="Submit" /> } 

Success:

 @model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel User name '@Model.UserName' is valid :) 

Check this link for server-side validation in the form of AJAX: http://www.codeproject.com/Articles/460893/Unobtrusive-AJAX-Form-Validation-in-ASP-NET-MVC