how to use jquery validation for simple text boxes

http://www.c-sharpcorner.com/Blogs/5004/

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

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Validation Example using JQuerytitle>

<%--this javascriptis used to show the message after valid statement.--%>

jQuery.validator.setDefaults({

debug: true,

success: "valid"

}); ;

script>

<%--write the following javascript for passing the parameter for jquery--%>

$(document).ready(function() {

$("#form1").validate({

rules: {

<%=txtUserName.UniqueID %>: {

minlength: 5,

required: true

<%=txtPassword.UniqueID %>: {

minlength: 5,

required: true

<%=TextIdea.UniqueID %>: {

//minlength: 5,

required: true

}

}, messages: {

<%=txtUserName.UniqueID %>:{

required: "Plaese enter your name",

minlength: "User name must be atleaet of 5 characters"

<%=txtPassword.UniqueID %>:{

required: "Plaese enter your password",

minlength: "Password must be atleaet of 5 characters"

<%=TextIdea.UniqueID %>:{

required: "Plaese enter your Ideas",

minlength: "Password must be atleaet of 5 characters"

}

});

script>

head>

<body>

<div>

User name

<asp:TextBox ID="txtUserName" runat="server"

Height="21px" MaxLength="5">asp:TextBox>

<br />

Password <asp:TextBox ID="txtPassword"

runat="server" TextMode="Password" MaxLength="5" >asp:TextBox>

<br />

The Idea

<asp:TextBox ID="TextIdea" runat="server" TextMode="MultiLine">asp:TextBox>

<br />

<asp:ButtonID="btnSubmit" runat="server" Text="Submit" />

Css(StyleSheet) File

body

{

}

#field

{

margin-left: .5em;

float: right;

}

#field, label

{

float: left;

font-family: Arial, Helvetica, sans-serif;

font-size: small;

}

{

clear: both;

}

input

{

border: 1px solid black;

margin-bottom: .5em;

}

input.error

{

border: 1px solid red;

}

label.error

{

position:absolute;

background: url('unchecked.gif') no-repeat;

padding-left: 20px;

margin-left: .3em;

vertical-align: middle;

background-color: #FFEBE8;

border: solid 1px red;

width: 170px;

}

label.valid

{

/*position:inherit;

background: url('checked.gif') no-repeat;

display: block;

width: 16px;

height: 16px;

border: none;

vertical-align:top;*/

position:absolute;

background: url('checked.gif') no-repeat;

padding-left: 20px;

margin-left: .3em;

vertical-align:top;

background-color: #FFEBE8;

border:none;

width: 0px;

height: 16px;

}

http://www.jquerybyexample.net/2012/12/jquery-to-check-all-textboxes-empty.html

you can also try

xmlns="http://www.w3.org/1999/xhtml">

$(document).ready(function () {

$('#btnsubmit').click(function () {

var uname = $('#txtname').val();

if (uname == '')

{

alert("Please Enter Name");

}

});

script>

<title>title>

head>

<body>

<div>

<asp:TextBox runat="server" ID="txtname">asp:TextBox>

<asp:Button ID="btnsubmit" runat="server" Text="Submit" />

div>

form>

body>

html>

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Akhil Mittal12y ago
http://www.c-sharpcorner.com/Blogs/5004/

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

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Validation Example using JQuerytitle>
    <link rel="stylesheet" href="Styles/ValidationStyle.css" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js">script>
    <script type="text/javascript" src="Scripts/jquery-latest.js">script>
    <script type="text/javascript" src="Scripts/jquery.validate.js">script>

<%--this javascriptis used to show the message after valid statement.--%>

    <script type="text/javascript">

        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        }); ;
    script>

<%--write the following javascript for passing the parameter for jquery--%>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#form1").validate({
                rules: {
                    <%=txtUserName.UniqueID %>: {
                        minlength: 5,
                        required: true
                    },
                    <%=txtPassword.UniqueID %>: {
                        minlength: 5,
                        required: true
                    },

                   <%=TextIdea.UniqueID %>: {
                    //minlength: 5,
                     required: true
                 }
                }, messages: {
                    <%=txtUserName.UniqueID %>:{
                        required: "Plaese enter your name",
                        minlength: "User name must be atleaet of 5 characters"
                        },
                    <%=txtPassword.UniqueID %>:{
                        required: "Plaese enter your password",
                        minlength: "Password must be atleaet of 5 characters"
                         },
                     <%=TextIdea.UniqueID %>:{
                      required: "Plaese enter your Ideas",
                      minlength: "Password must be atleaet of 5 characters"
                       }
                  }
            });
        });
    script>
head>
<body>
    <form id="form1" runat="server">
    <div>
        User name
        <asp:TextBox ID="txtUserName"  runat="server"
            Height="21px" MaxLength="5">asp:TextBox>
        <br />
        <br />
        Password <asp:TextBox ID="txtPassword"
            runat="server"  TextMode="Password" MaxLength="5" >asp:TextBox>
        <br />
        <br />
        The Idea
        <asp:TextBox ID="TextIdea" runat="server" TextMode="MultiLine">asp:TextBox>
        <br />
        <br />
                  <asp:ButtonID="btnSubmit" runat="server" Text="Submit" />
Css(StyleSheet) File
body
{
}
#field
{
    margin-left: .5em;
    float: right;
}
#field, label
{
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
br
{
    clear: both;
}
input
{
    border: 1px solid black;
    margin-bottom: .5em;
}
input.error
{
    border: 1px solid red;
}
label.error
{
    position:absolute;
    background: url('unchecked.gif') no-repeat;
    padding-left: 20px;
    margin-left: .3em;
    vertical-align: middle;
    background-color: #FFEBE8;
    border: solid 1px red;
    width: 170px;
}
label.valid
{
    /*position:inherit;
    background: url('checked.gif') no-repeat;
    display: block;
    width: 16px;
    height: 16px;
    border: none;
    vertical-align:top;*/

    position:absolute;
    background: url('checked.gif') no-repeat;
    padding-left: 20px;
    margin-left: .3em;
    vertical-align:top;
    background-color: #FFEBE8;
    border:none;
    width: 0px;
    height: 16px;
}

or

http://www.jquerybyexample.net/2012/12/jquery-to-check-all-textboxes-empty.html
Jignesh Trivedi12y ago
hi,
you can also use data annotation for the validation
Please refer
http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model
http://adventuresdotnet.blogspot.in/2009/08/aspnet-webforms-validation-with-data.html
hope this will help you.
Abhay Shanker12y ago
you can also try

xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#btnsubmit').click(function () {

                var uname = $('#txtname').val();
                if (uname == '')
                {
                    alert("Please Enter Name");
                }

            });
        });

    script>
    <title>title>
head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox runat="server" ID="txtname">asp:TextBox>
            <asp:Button ID="btnsubmit" runat="server" Text="Submit" />
        div>
    form>
body>

html>
Abhay Shanker12y ago
Check the url

http://www.c-sharpcorner.com/Blogs/5004/textbox-validation-using-jquery.aspx
Khan Abrar Ahmed12y ago
Hi please refer the below link
http://www.contentedcoder.com/2012/08/jquery-validation-groups-for-webforms.html
http://www.brainbrushups.com/2013/10/validate-aspnet-text-box-control-using.html