JQuery Required Field Validation In .NET

Here creating validation on input fields using Jquery. To validate input filed in this example I will use jquery validation plug in and Jquery script.

Create a project in VS2010 and it has following directory structure.

Jquery Validation directory structure

Jquery Validation directory structure

Now create a web form “RegisterForm.aspx” like:

JQuery Validation Form

JQuery Validation Form

Add script reference on web form

<script type="text/javascript" src="Jquery/jquery-1.8.2.min.js"></script>
<script type ="text/javascript" src="Jquery/jquery.validate.min.js"></script>

Add input fields on web form

<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td><asp:TextBox ID="txtMail" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password</td>
<td><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2"><asp:Button ID="btnValidate" runat="server" Text="Validate" /></td>
</tr>
</table>
</div>
</form>

Create validate function to validate form

<script type="text/javascript">
$(document).ready(function ()
        {
            $("#form1").validate(
            {
                rules:
                {
                    txtName:
                    {
                        required: true
                    },
                    txtMail:
                    {
                        required: true,
                        email: true
                    },
                    txtPassword:
                    {
                        required: true
                    }
                },
                messages:
                {
                }
            }
            );
        }
        );
</script>

OUTPUT

Jquery Form Validation

Jquery Form Validation

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: