Sunday, 3 July 2016

ASP.NET Form Validation Using JQuery

Dear All, Here i would like to present ASP.NET Form Validation Using JQuery





1.Design the form as below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQ20.aspx.cs" Inherits="WebApplication1.JQ20" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(function () {
            var isValid = true;
            $("#btnSubmit").click(function () {                
                $("input[type='text'],textarea,select").each(function () {                   
                    if ($(this).val() == '' || $(this).val() == '0') {
                        $(this).css('border', '1px solid red');                        $(this).next().append($(this).parent().prev("td").text().substring(5,$(this).parent().prev("td").text().length) + ' is mandatory').css('color','Red');
                        isValid = false;
                    }
                });                
                if (isValid == false)
                    event.preventDefault();
            });           
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
            <tr>
                <td>Enter Name</td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>Enter Email ID</td>
                <td>
                    <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>Enter Mobile No</td>
                <td>
                    <asp:TextBox ID="txtMNo" runat="server"></asp:TextBox>
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>Enter Qualification</td>
                <td>
                    <asp:DropDownList ID="ddlQuali" runat="server">
                        <asp:ListItem Text="Select" Value="0"></asp:ListItem>
                        <asp:ListItem Text="B.Tech" Value="1"></asp:ListItem>
                        <asp:ListItem Text="M.Tech" Value="2"></asp:ListItem>
                        <asp:ListItem Text="MCA" Value="3"></asp:ListItem>
                    </asp:DropDownList>
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>Enter Address of Communication</td>
                <td>
                    <asp:TextBox ID="txtAOC" runat="server" TextMode="MultiLine"></asp:TextBox>
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
                </td>
                <td>
                    <input type="reset" value="Clear" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>


Image:






ASP.NET JQuery













Code Behind :






using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class JQ20 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            Response.Write("<script>alert('Form Submitted Sucessfully')</script>");
        }
    }
}

1 comment :