Simple registration form with client side validation in ASP.Net

 Print 
 Posted By :  ASPArticles
 Posted Date: Mar 21, 2016
 Category :  , ,
 Post Hits : 652

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.

Related Article

In Designer File

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

client side validation designer mode

Write below code in designer file.

<div align="center">
    <table style="border: 1px solid black;">
        <tr>
            <td colspan="2"><span style="color: red;">*</span>indicates required fields
            </td>
        </tr>
        <tr>
            <td>First Name</td>
            <td>
                <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                <span style="color: red;">*</span>
            </td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>
                <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                <span style="color: red;">*</span>
            </td>
        </tr>
        <tr>
            <td>Age</td>
            <td>
                <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
                <span style="color: red;">*</span>
            </td>
        </tr>
        <tr>
            <td>Gender</td>
            <td>
                <asp:DropDownList ID="ddlGender" runat="server">
                    <asp:ListItem Text="--select--" Value="--select--"></asp:ListItem>
                    <asp:ListItem Text="Male" Value="Male"></asp:ListItem>
                    <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
                </asp:DropDownList>
                <span style="color: red;">*</span>
            </td>
        </tr>
        <tr>
            <td>Email</td>
            <td>
                <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                <span style="color: red;">*</span>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
                    OnClientClick="return CheckValidation(); "></asp:Button>
            </td>
            <td></td>
        </tr>
    </table>
</div>

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

<head runat="server">
    <title>validation using JavaScript</title>
    <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 <= 30)) {
                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 C# 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.

client side validation page load

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

client side validation on submit click error alert 1

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

client side validation on submit click error alert 2

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





blog comments powered by Disqus