ASP.NET MVC5 - Validating user input

Monday 16, February 2015   |   Post link   |     Download related material

ASP.NET MVC5 has great support for input validation. There are two main approaches to setting up validation:

• Validation attributes
• Implementing IValidatableObject interface on model

The post uses validation attributes for validation. Adding the validation support starts right from the data definition - which is the model. Let's consider the example of a user registration where the user needs to enter his user-id (email address) and a password.

The validation requirements are:

• Email address should not be empty
• Email address should have a valid email address format
• Password should be greater than 5 and less than 10 characters

The flow: The user is first taken to /Home/StartRegistration url where he enters the email-id and password. On clicking submit, the action /Home/CompleteRegister fires. if the validation succeeds the user continue to the CompleteRegistration view. If the validation fails he is redirected to Home/StartRegistration where the validation error messages are displayed. As of now, we are only using server-side validation.

First let's define the registration model class:

public class Registration
{
	[Required]
	[EmailAddress]
	public string Email { get; set; }

	[Required]		
	[MaxLength(10, ErrorMessage="The length should be less than {1} characters")]
	[MinLength(5, ErrorMessage="Too short")]
	public string Password { get; set; }
}

Let's create a view (StartRegistration.cshtml):

@using Application.Models

@model Registration
@{
    ViewBag.Title = "Registration";
}

Subscribe

@using(@Html.BeginForm("CompleteRegistration", "Home"))
{	
	@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
	@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
	<br />			
	@Html.EditorFor(m => m.Password, new { htmlAttributes = new { @class = "form-control" } })
	@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })	
	<hr />
	<input type="Submit" value="Submit" />
}

Note: the CSS classes are the ones provided out of the box by Visual Studio.NET. You can define you own CSS class if you like.
The relevant HomeController methods are:

public ActionResult StartRegistration(Registration r)
{
	return View(r);
}

public ActionResult CompleteRegistration(Registration r)
{
	if (ModelState.IsValid)
	{
		return View(r);
	}
	else
	{
		return new RedirectResult(Url.Action("StartRegistration", r));
	}	
} 

Start the application and try out a few values.
If the validation fails, we see:



If the validation succeeds, we see:



The important point to note is that the error messages are evaluated when the user clicks the 'Submit' button. If the validation fails in the CompleteRegistration method, we pass back the Registration object to StartRegistration so that it can use that object to display the errors.

Client-side validation
That was about the server side of validation. We can enable client side validation so that the validation logic can fire within the browser using JavaScript thus saving us a round-trip to the server and avoid a page reload. Let's enable this.

Firstly, we need to include JQuery validation script. If you used Visual Studio to generate the project, the bundle is already registered in the App_Start\BundleConfig.cs file:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*"));
Add the following lines to the StartRegistration.cshtml file right at the end:

@section Scripts 
{
	@Scripts.Render("~/bundles/jqueryval")
}

Also, ensure client-side validation is enabled in the Web.config file:

<appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
 </appSettings>

Start the application and navigate to Home/StartRegistration. When you enter a valid email address and tab-out of the email-id textbox, you'll notice the error disappearing - this is because of client side validation doing its stuff.



Download the source code here

Categories: ASP.NET MVC (4) Programming (28)

Tags: ASP.NET(4) MVC(4) Validation(2) Web Development(4)