Jquery Validation in Asp.net | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

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.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget