ASP.NET MVC Validations using MVCContrib

In my earlier post, I have explained how to use MVCContrib Grid in ASP.net MVC application. In this post, I demonstrate how you can use ASP.net MVC client side validation using the MVCContrib Validation helpers.  MVCContrib is a cool contrib project to ASP.net MVC that extends the functionalities of an ASP.net MVC application and it provides rich set of validation helpers and it also provides different validation groups. The MVCContrib project can download from http://www.CodePlex.com/MvcContrib.

The following are the steps to get Validation Helpers to work:

Step1

Add a reference to the MvcContrib assembly (download available from http://www.CodePlex.com/MvcContrib)

Step 2

Add namespace import for MvcContrib to your web.config file:

<pages>
    <namespaces>
        <add namespace="MvcContrib.UI"/>
        <add namespace="MvcContrib.UI.Tags"/>
        <add namespace="MvcContrib.UI.Html"/>
       <add namespace="MvcContrib"/>
    </namespaces>
</pages>

Step 3

Call Form.ValidatorRegistrationScripts within the head element and Form.ValidatorInitializationScripts at the end of your body element of the required pages. Validators requires that you call  Form.ValidatorRegistrationScripts within the head element, Form.ValidatorInitializationScripts at the end of your body element, and when creating your form call Form.FormValidation as the htmlAttributes parameter.

Using the Validation Helper

The below shows the sample code

<asp:Content ID="headContent" ContentPlaceHolderID="head" runat="server">
<%= Html.Validation().ValidatorRegistrationScripts() %>
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<% using (Html.Form("Home", "ValidationHelper",
FormMethod.Post,
Html.Validation().FormValidation("FormValidation"))) { %> 

Name: <%= Html.TextBox("Name") %>
 <%= Html.Validation().RequiredValidator("nameRequiredValidator",
"Name", "You must enter a name.", "FormValidation")%>
 <br /> <br />
EMail: <%= Html.TextBox("EMail") %>
<%= Html.Validation().RegularExpressionValidator("emailRegexValidator",
 "EMail",
  @"^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9]"+
  @"[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]"+
  @"*[a-zA-Z]$",
  "Enter a valid Email.", "FormValidation")%>
  <%= Html.Validation().RequiredValidator("emaillRequiredValidator",
"EMail",  "You must enter a EMail.","FormValidation")%>
 <br /> <br />
Retype Email: <%= Html.TextBox("RetypeEMail")%>
 <%= Html.Validation().CompareValidator("emailCompareValidator",
"RetypeEMail", EMail",  ValidationDataType.String,
ValidationCompareOperator.Equal,  "EMail must be same.", "FormValidation")%>
<br /><br />
Age: <%= Html.TextBox("Age") %>
 <%= Html.Validation().RangeValidator("ageRangeValidator",
"Age", "18", "60", ValidationDataType.Integer,
"Age range must be 18-60.",
"FormValidation")%>
<%= Html.Validation().RuiredValidator("eageRequiredValidator",
"Age", "You must enter a Age.", "FormValidation")%> <br />     <br />
<input type=submit value="Submit" />
<% } %>

<%= Html.Validation().ValidatorInitializationScripts() %>

</asp:Content>
 
In the above sample code first I have called Form.ValidatorRegistrationScripts within the head element. 

<asp:Content ID="headContent" ContentPlaceHolderID="head" runat="server">
<%= Html.Validation().ValidatorRegistrationScripts() %>
</asp:Content>
 
I have added a content place holder named "headelement" within the head element of the master page and in my content page, called the Html.Validation().ValidatorRegistrationScripts() method. In the Form helper class, called Html.Validation().FormValidation("FormValidation") as the htmlAttributes parameter. The argument FormValidation" specifies that the name of the validation group. You can use different validation groups  in  a single page.
 
<% using (Html.Form("Home", "ValidationHelper",
FormMethod.Post,Html.Validation().FormValidation("FormValidation"))) { %>
 
At the end of the body element, called the Form.ValidatorInitializationScripts
 
<%= Html.Validation().ValidatorInitializationScripts() %>
 
The sample form using four input fields to validate. The first input field for Name is using a RequiredValidator
 
Name: <%= Html.TextBox("Name") %>
 <%= Html.Validation().RequiredValidator("nameRequiredValidator",
"Name", "You must enter a name.", "FormValidation")%>

 The first argument of Html.Validation().RequiredValidator method is the Name of the validator, second argument is the control to validate, third argument is the error message if validation fails and last argument is the name of the validation group.

I have used RegularExpressionValidator and RequiredValidator for validating the email address.
 
EMail: <%= Html.TextBox("EMail") %>
<%= Html.Validation().RegularExpressionValidator("emailRegexValidator",
 "EMail",
  @"^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9]"+
  @"[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]"+
  @"*[a-zA-Z]$",
  "Enter a valid Email.", "FormValidation")%>
  <%= Html.Validation().RequiredValidator("emaillRequiredValidator",
"EMail",  "You must enter a EMail.","FormValidation")%>
 
The first argument of Html.Validation().RegularExpressionValidator method is the Name of the validator, second argument is the control to validate, third argument is the validation expression, fourth arguement is the  error message if validation fails and last argument is the name of the validation group.

The third input field is  'Retype Email' and a CompareValidator is using for validate the field.
 
Retype Email: <%= Html.TextBox("RetypeEMail")%>
 <%= Html.Validation().CompareValidator("emailCompareValidator",
RetypeEMail", "EMail", ValidationDataType.String,
ValidationCompareOperator.Equal,  "EMail must be same.", "FormValidation")%>

 The first argument of Html.Validation().CompareValidator method is the Name of the validator, second argument is the control to validate, third argument is the reference name of the compare, fourth arguement is the validation data type to compare, fifth argument is operator of the compare validation, sixth argument is the error message and last argument is  the name of the validation group.

Both RangeValidator and RequiredValidator is used for validating the Age field.
 
 <%= Html.Validation().RangeValidator("ageRangeValidator",
"Age", "18", "60", ValidationDataType.Integer,
"Age range must be 18-60.",
"FormValidation")%>
<%= Html.Validation().RuiredValidator("eageRequiredValidator",
"Age", "You must enter a Age.", "FormValidation")%>

 
The first argument of Html.Validation().RangeValidator method is the Name of the validator, second argument is the control to validate, third argument is the minimum value of the range, fourth argument is the maximum value of the range, fifth argument is the data type of the validation, sixth argument is the error message and last argument is  the name of the validation group.