Jquery Validation in Asp.net

Introduction: In this post I try to explain how we can use the Jquery Validation in Asp.net and insert values into Database.

Description:

I have created a table TABLE_REGISTARTION. Here USER_ID is primary key.

USER_ID	int
USERNAME	varchar(50)
FIRST_NAME	varchar(50)
LAST_NAME	varchar(50)
USER_EMAIL	varchar(50)
USER_PHONE	varchar(50)
ADDRESS	varchar(50)
CITY	varchar(50)
STATE	varchar(50)
ZIP	varchar(50)

Put the below mention Jquery code between Head tag (before the close of Head Tag).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

         

            $("#form1").validate({

              

                onsubmit: false

            });

            $("#btnregister").click(function (evt) {

              

                var isValid = $("#form1").valid();

                if (!isValid)

                    evt.preventDefault();

            });

        });

  </script>

Also add the style between Head Tag as mention below:

<style type="text/css">

   form {

  margin: 0 auto;

  width: 500px;

}

fieldset {

  margin-bottom: 20px;

}

table {

  width: 470px;

  margin-top: 10px;

}

table th {

  font-weight: bold;

  text-align: left;

}

label {

  clear: both;

  float: left;

  line-height: 24px;

  margin-top: 10px;

  padding-right: 10px;

  text-align: right;

  vertical-align: middle;

  width: 125px;

}

label.error {

  clear: none;

  color: Red;

  float: left;

  padding-left: 10px;

  white-space: nowrap;

}

input {

  float: left;

  margin-top: 10px;

}

input[type=submit] {

  clear: both;

  margin: 10px 0 10px 120px;

}

   </style>

Add a new webform to project. Drag and drop the control from Toolbox as added below:

<table border="1px"><tr><td><b>Validate Employee Registration Form Using Jquery</b></td></tr>

    <tr><td>

   <table border="1px">

   <tr><td><label for="Username">User Name:</label></td>

   <td><asp:TextBox runat="server" ID="txtusername" CssClass="required" /></td></tr>

   

     <tr><td><label for="Firstname">First Name:</label></td>

   <td><asp:TextBox runat="server" ID="txtfirstname" CssClass="required" /></td></tr>

    <tr><td> <label for="LastName">Last Name:</label></td>

   <td><asp:TextBox runat="server" ID="txtlastname" CssClass="required" /></td></tr>

   <tr><td> <label for="Email">Email:</label></td>

   <td><asp:TextBox runat="server" ID="txtemail" CssClass="required email" /></td></tr>

   

    <tr><td> <label for="Phone">Phone:</label></td>

   <td><asp:TextBox runat="server" ID="txtphone" CssClass="required digits" /></td></tr>

    <tr><td> <label for="Address">Address:</label></td>

    <td><asp:TextBox runat="server" ID="txtaddress" CssClass="required" /></td></tr>

   

    <tr><td> <label for="City">City:</label></td>

    <td><asp:TextBox runat="server" ID="txtcity" CssClass="required" /></td></tr>

   

    <tr><td> <label for="State">State:</label></td>

    <td><asp:TextBox runat="server" ID="txtstate" CssClass="required" /></td></tr>

   

    <tr><td> <label for="Zip">Zip:</label></td>

    <td align="center"><asp:TextBox runat="server" ID="txtzip" CssClass="required digits" /></td></tr>

   

    <tr><td> &nbsp;</td><td><asp:Button runat="server" ID="btnregister" Text="Register"

            onclick="btnregister_Click"/></td></tr></table>

    </td></tr></table>

Note: Don’t forget to add Connectionstring in web.config file.

Now go to .aspx.cs page and write the below mention code:

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());

protected void btnregister_Click(object sender, EventArgs e)

    {

        try

        {

            SqlCommand cmd = new SqlCommand("Insert into TABLE_REGISTARTION(USERNAME,FIRST_NAME,LAST_NAME,USER_EMAIL,USER_PHONE,ADDRESS,CITY,STATE,ZIP) VALUES (@USERNAME,@FIRST_NAME,@LAST_NAME,@USER_EMAIL,@USER_PHONE,@ADDRESS,@CITY,@STATE,@ZIP) ", con);

            con.Open();

            cmd.Parameters.AddWithValue("@USERNAME", txtusername.Text);

            cmd.Parameters.AddWithValue("@FIRST_NAME", txtfirstname.Text);

            cmd.Parameters.AddWithValue("@LAST_NAME", txtlastname.Text);

            cmd.Parameters.AddWithValue("@USER_EMAIL", txtemail.Text);

            cmd.Parameters.AddWithValue("@USER_PHONE", txtphone.Text);

            cmd.Parameters.AddWithValue("@ADDRESS", txtaddress.Text);

            cmd.Parameters.AddWithValue("@CITY", txtcity.Text);

            cmd.Parameters.AddWithValue("@STATE", txtstate.Text);

            cmd.Parameters.AddWithValue("@ZIP", txtzip.Text);

            cmd.ExecuteNonQuery();

            con.Close();

            cmd.Dispose();

            Clear();

        }

        catch (Exception ex)

        {

        }

    }

    public void Clear()

    {

        txtusername.Text = "";

        txtfirstname.Text = "";

        txtlastname.Text = "";

        txtemail.Text = "";

        txtphone.Text = "";

        txtaddress.Text = "";

        txtcity.Text = "";

        txtstate.Text = "";

        txtzip.Text = "";

    }

In VB (.aspx.vb)

Imports System.Data

Imports System.Data.SqlClient

Imports System.Configuration

Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("con").ToString())

    Protected Sub Order_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Order.Click

        Try

            Dim cmd As New SqlCommand("Insert into TABLE_REGISTARTION(USERNAME,FIRST_NAME,LAST_NAME,USER_EMAIL,USER_PHONE,ADDRESS,CITY,STATE,ZIP) VALUES (@USERNAME,@FIRST_NAME,@LAST_NAME,@USER_EMAIL,@USER_PHONE,@ADDRESS,@CITY,@STATE,@ZIP) ", con)

            con.Open()

            cmd.Parameters.AddWithValue("@USERNAME", txtusername.Text)

            cmd.Parameters.AddWithValue("@FIRST_NAME", txtfirstname.Text)

            cmd.Parameters.AddWithValue("@LAST_NAME", txtlastname.Text)

            cmd.Parameters.AddWithValue("@USER_EMAIL", txtemail.Text)

            cmd.Parameters.AddWithValue("@USER_PHONE", txtphone.Text)

            cmd.Parameters.AddWithValue("@ADDRESS", txtaddress.Text)

            cmd.Parameters.AddWithValue("@CITY", txtcity.Text)

            cmd.Parameters.AddWithValue("@STATE", txtstate.Text)

            cmd.Parameters.AddWithValue("@ZIP", txtzip.Text)

            cmd.ExecuteNonQuery()

            con.Close()

            cmd.Dispose()

            Clear()

        Catch ex As Exception

        End Try

    End Sub

    Public Sub Clear()

        txtusername.Text = ""

        txtfirstname.Text = ""

        txtlastname.Text = ""

        txtemail.Text = ""

        txtphone.Text = ""

        txtaddress.Text = ""

        txtcity.Text = ""

        txtstate.Text = ""

        txtzip.Text = ""

    End Sub

Now run the project and check the result.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.