Enable/Disable Client Side Validation for the Entire Application in ASP.NET MVC

To enable client validation below scripts are required to added to the view.

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

When we create an internet application in MVC3/MVC4 by default below settings are enabled in web.config.

<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

To disable client side validation for the entire application we can set above settings to false.

<appSettings>
<add key="ClientValidationEnabled" value="false"/>
<add key="UnobtrusiveJavaScriptEnabled" value="false"/>
</appSettings>

E-mail Validation in HTML5

E-mail addresses are commonly used on web sites for variety of reasons ranging from user registrations to
contact forms. You can accept e-mail addresses using the email input type.

<span>Enter your email address :</span>
<br />
<input id="email" type="email" />
<br />
<input type="submit" value="Submit"/>

As you can see, the type attribute is set to email. If you try to enter an invalid e-mail address, the browser displays an error message.

Notice that the error message is displayed only if the text box contains a value. If the text box is left empty, no validation is performed. This behavior is similar to ASP.NET validation controls.

Simple Validation Form In Jquery

Preview On Focus:



Preview On Button Click:



Below is our HTML form with one text box and the validation messages.

<form id="form1" runat="server">
<fieldset class="formContainer">
<h3>Simple Validation Form.</h3>
<div class="rowContainer">
<label for="txtFirstname">Choose a username</label>
<input id="txtFirstname" type="text"/>
<div class="tooltipContainer info">Minimum 4 characters, maximum 15 characters.</div>
<div class="tooltipContainer error">Username must be between 4 and 15 characters.</div>
</div>
<input type="button" id="btnSubmit" value="Sign in" onclick="validateForm()"/>
</fieldset>
</form>

Add the form style.

<style type="text/css">
body
{
font-family:Arial, Sans-Serif;
font-size:83%;
}
.formContainer
{
background-color:#F5EFC9;
border:none;
padding:30px;
}
.formContainer h3
{
margin:0px;
padding:0px 0px 10px 0px;
font-size:135%;
}
.rowContainer
{
width:100%;
overflow:hidden;
padding-bottom:5px;
height:34px;
}
.rowContainer label
{
width:140px;
float:left;
color: #758656;
font-weight:bold;
}
.rowContainer input[type="text"]
{
width:200px;
}
.tooltipContainer
{
height:16px;
font-size:11px;
color: #666666;
display:none;
float:none;
background-repeat:no-repeat;
background-position:left center;
padding:0px 20px;
}
.info
{
background-image:url('info.gif');
}
.error
{
background-image:url('error.gif');
}
</style> 

Add the Jquery script to validate the form.

<script type="text/javascript">
$(document).ready(function () {
$(".formContainer input[type=text]").focus(function () {
$(this).parent().find(".error").css("display", "none");
$(this).parent().find(".info").css("display", "block");
}).blur(function () {
$(this).parent().find(".info").css("display", "none");
});
});
function validateForm() {
$(".formContainer input[type=text]").each(function () {
var text = $(this).attr("value");
if (text == "") {
$(this).parent().find(".error").css("display", "block");
}
if (text.length < 5) {
$(this).parent().find(".error").css("display", "block");
}
});
}
function clearForm() {
$(".formContainer input[type=text]").each(function () {
$(this).parent().find(".error").css("display", "none");
});
}
</script>

Server-Side and Client-Side Validation in ASP.NET

Server-Side Validation

You can use the validator controls to verify a page automatically when the user submits it or manually in your code. The first approach is the most common. When using automatic validation, the user receives a normal page and begins to fill in the input controls. When finished, the user clicks a button to submit the page. Every button has a CausesValidation property, which can be set to true or false. What happens when the user clicks the button depends on the value of the CausesValidation property:

• If CausesValidation is false, ASP.NET will ignore the validation controls, the page will be posted back, and your event-handling code will run normally.

• If CausesValidation is true (the default), ASP.NET will automatically validate the page when the user clicks the button. It does this by performing the validation for each control on the page. If any control fails to validate, ASP.NET will return the page with some error information, depending on your settings. Your click event-handling code may or may not be executed—meaning you’ll have to specifically check in the event handler whether the page is valid.

Based on this description, you’ll realize that validation happens automatically when certain buttons are clicked. It doesn’t happen when the page is posted back because of a change event (such as choosing a new value in an AutoPostBack list) or if the user clicks a button that has CausesValidation set to false. However, you can still validate one or more controls manually and then make a decision in your code based on the results. 

Client-Side Validation

In most modern browsers (including Internet Explorer 5 or later and any version of Firefox), ASP.NET automatically adds JavaScript code for client-side validation. In this case, when the user clicks a CausesValidation button, the same error messages will appear without the page needing to be submitted and returned from the server. This increases the responsiveness of your web page. However, even if the page validates successfully on the client side, ASP.NET still revalidates it when it’s received at the server. This is because it’s easy for an experienced user to circumvent client-side validation. For example, a malicious user might delete the block of JavaScript validation code and continue working with the page. By performing the validation at both ends, ASP.NET makes sure your application can be as responsive as possible while also remaining secure.

Allow spaces when validating email using regular expressions

I have used below regular expression to validate the email address in asp.net RegularExpressionValidator control.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="TextBox1"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>

It's validating the email address correctly but when a user enter a space at the beginning or at the end of the email address the validator fired as its a invalid email address.

Below regular expression will ignore the spaces at the end and the beginning of the email address.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="TextBox1"
ValidationExpression="\s*\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*\s*">*</asp:RegularExpressionValidator>

How to use CustomValidator with Server Side Validation Method

Below is the custom validator.

<asp:CustomValidator id="CustomValidator1" runat="server" OnServerValidate="RevisionValidate" ControlToValidate="TextBoxRevisionOrder" ErrorMessage="Invalid RevOrder Format"> </asp:CustomValidator> 

OnServerValidate - Server side method name.
ControlToValidate - Text box id to validate.

protected void RevisionValidate(object source, ServerValidateEventArgs args) 

{ 

    //Validation Code goes here
}

On a button click event i need to fire the validation.
Inside the button click event first you need to add the below code.

if(Page.IsValid) {

}

Any other code that you need to execute on the button click event, add inside the above "if" condition.