In the previous article, I have explained server Side Validation in asp.net using simple registration form. In this article we are going to learn client side validation in asp.net using JavaScript.

In designer file:

In Designer File, create a registration form using TextBox, DropDownlist and Button Control. Designer file will look like as shown below.

Write below Code in designer file.

div align="center">
table style="border: 1px solid black;">

td colspan="2">span style="color: red;">*span>indicates required fields
td>


td>First Nametd>
td>
                TextBox ID="txtFirstName" runat="server">TextBox>
span style="color: red;">*span>
td>


td>Last Nametd>
td>
                TextBox ID="txtLastName" runat="server">TextBox>
span style="color: red;">*span>
td>


td>Agetd>
td>
                TextBox ID="txtAge" runat="server">TextBox>
span style="color: red;">*span>
td>


td>Gendertd>
td>
                DropDownList ID="ddlGender" runat="server">
                    ListItem Text="--select--" Value="--select--">ListItem>
                    ListItem Text="Male" Value="Male">ListItem>
                    ListItem Text="Female" Value="Female">ListItem>
DropDownList>
span style="color: red;">*span>
td>


td>Emailtd>
td>
                TextBox ID="txtEmail" runat="server">TextBox>
span style="color: red;">*span>
td>


td>
                Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
                    OnClientClick="return CheckValidation(); ">Button>
td>
td>td>

table>
div>

Below is the JavaScript code. Write JavaScript code in designer file within head section.

head runat="server">

script type="text/javascript">
function CheckValidation() {

var txtFirstName = document.getElementById("txtFirstName").value;
var txtLastName = document.getElementById("txtLastName").value;
var txtAge = document.getElementById("txtAge").value;
var txtEmail = document.getElementById("txtEmail").value;
var EmailRegExpression = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;

if (txtFirstName.trim() == '') {
                alert("Please enter first Name.");
return false;
            }

if (txtLastName.trim() == '') {
                alert("Please enter last name.");
return false;
            }
if (!(txtAge >= 20 && txtAge                 alert("age must be between 20 and 30 (numeric only)");
return false;
            }
if (document.getElementById("ddlGender").value == "--select--") {
                alert("Please select gender.");
return false;
            }

if (txtEmail.trim() == '' || !EmailRegExpression.test(txtEmail.trim())) {

                alert("Please enter valid email.");

return false;

            }
        }
script>
head>

Complete Code:

protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnSubmit_Click(object sender, EventArgs e)
{
//write your save method code

}

Output:

When page loads,form will look like as shown below.

When you click on Submit Button without filling any field, error message will be shown on alert.

When you click on submit button only filling First Name and Last Name, error message will be shown on alert.

And when you fill all the fields and click on submit button, form will be posted to server and you can write your code in submit button event handler to save your data to database.

In the previous article, we have learnt side validation in asp.net Simple registration form with Server Side Validation in asp.net