In my previous article I explained how to create controls in ASP.Net MVC 3 using Razor view. In this I give the example of how to create the registration form. Now in this article I an going to apply the validation to this registration form. For some fields like Name, Email, Phone_No and Address I apply the Required validation that gives the message please enter your Name, Email, Phone_No and Address respectively and a regular expression field for email_id that contain the @ sign. It also gives the validation summary. Now to start, use the following steps.
Step 1 : First of all please follow my previous article link, and make the form application like that.
Step 2 : Modify some files in order to apply validation, like
Code for Registration.cs file.
using System.ComponentModel.DataAnnotations;
namespace MvcApplication4.Models
{
public class Registration
{
[Required(ErrorMessage="Please enter your Name")]
public string Name { get; set; }
[Required(ErrorMessage="Please enter your valid Email_id")]
[RegularExpression(".+\\@.+\\..+",ErrorMessage="Please Enter your valid email which contains the @ Sign")]
public string Email { get; set; }
[Required(ErrorMessage="Please enter your valid phone number")]
public string Phone { get; set; }
[Required(ErrorMessage="Please enter your address")]
public string Address { get; set; }
}
}
Code for HomeController.cs file
namespace MvcApplication4.Controllers
{
public class HomeController : Controller
{
public ViewResult Index()
{
return View();
}
[HttpGet]
public ViewResult RegistrationForm()
{
return View();
}
[HttpPost]
public ViewResult RegistrationForm(Registration registration)
{
if (ModelState.IsValid)
{
return View("Congratualation", registration);
}
else
{
// there is a validation error - redisplay the form
return View();
}
}
}
}
Code for RegistrationForm.cshtml file
@model MvcApplication4.Models.Registration
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>RsvpForm</title>
</head>
<body>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<p>
Your name: @Html.TextBoxFor(x => x.Name)
</p>
<p>
Your email: @Html.TextBoxFor(x => x.Email)</p>
<p>
Your phone: @Html.TextBoxFor(x => x.Phone)</p>
<p>
Your address: @Html.TextBoxFor(x=>x.Address)</p>
<input type="submit" value="Register Me" />
}
</body>
</html>
Code for Index.cshtml file
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
<h3>Please fill the registration form by clicking on the following registration link</h3>
@Html.ActionLink("Registration", "RegistrationForm")
</div>
</body>
</html>
Code for Congratualation.cshtml file
@model MvcApplication4.Models.Registration
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Congratualation</title>
</head>
<body>
<div>
<h1>Congratualation, @Model.Name!!!</h1>
<p>Your Registration has been Successfully completed.</p>
</div>
</body>
</html>
Step 3 : Now run the application by pressing F5, and the output looks like:
![pic1.gif]()
When I click on the Registration link, the registration form is open, and when I only give the name and submit then the form gives the Errormessage because I apply the validation in all the fields.
![pic2.gif]()
When all the fields are filled in, it does not submit the form when the submit button is clicked because the regular expression validation is applied to the email field, so that we can enter the email with the @ and . sign.
![pic3.gif]()
Now after giving all the valid information and the submit button is clicked the congratulation message is displayed.
![pic4.gif]()
Summary : In this article I discussed how to apply the validation in the form using Razor view.