Category: JQuery

12 Jun 2016 00:35

Joined:	23/08/2014
Level:	Silver
Points:	104

Points:	5

Validate the textbox using JQuery

i have one text box.

Name textbox

Validate the above textbox using Jquery.

for that download the jquery 1.4.1 and put in that project script.

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

<head runat="server">
</head>

<body>
<form id="form1" runat="server">
<div>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"> <pre

<script src="Scripts/jquery.validate.js" type="text/javascript"></script>

<script type ="text/javascript" >

$(document).ready(function () {
$("#form1").validate({

rules: {
<%=txtName.UniqueID %>:{
required:true
},

}

},

messages: {

<%=txtName.UniqueID %>:{
required: "Name should not be empty"
},

}

});
});
</script>

<style type ="text/css" >
label.error {
color: red;
display:inline;
}
.error
{
height: 26px;
}
</style>

<br />

Name <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<br />
<br />

<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="error"
onclick="btnSubmit_Click" />

</div>
</form>
</body>
</html>

i have one text box validate that textbox using jquery.

When i run as follows

Name textbox

Without typing in text box and click submit message not shown.

what is the mistake in my above code.

#766441

12 Jun 2016 23:42

Joined:	03/05/2013
Level:	Gold
Points:	15822

Points:	4

Hi,

If you want to validate the textbox text before submit the records, then on click of submit button you need to validate, if record status is empty then prevent them by using PreventDefault() method of Jquery,

In my below scenario I want to validate the textboxes of mandatory fields, for that I make a separate class name it as "mandatory", now I'm going to check the null case for all those mandatory textboxes.


$(document).ready(function() {
	    $('#btnSubmit').click(function(e) {
	        var isValid = true;
	        $('input[type="text"].mandatory').each(function() {
	            if ($.trim($(this).val()) == '') {
	                isValid = false;
	                $(this).css({
	                    "border": "1px solid red",
	                    "background": "#FFCECE"
	                });
	            }
	            else {
	                $(this).css({
	                    "border": "",
	                    "background": ""
	                });
	            }
	        });
	        if (isValid == false)
	            e.preventDefault();
	        else
	            alert('Records submitted successfully..!');
	    });
	});

In above code this line is very very important,

$('input[type="text"].mandatory').each(function() {

in above line .mandatory is the classname which i used to make the controls as mandatory.
Refer below link for more details, http://www.jquerybyexample.net/2012/12/jquery-to-check-all-textboxes-empty.html

--------------------------------------------------------------------------------
Give respect to your work, Instead of trying to impress your boss.

N@veen
Blog : http://naveens-dotnet.blogspot.in/

#766444

13 Jun 2016 02:23

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	4

check .length property of the control to check if the control value is empty or not
see below snippet


$("#Name").focus()

$("#Name, #Address").blur(function(){
    if($(this).val().length == 0){
        $(this).after('<div class="red">This field is required</div>');
    } else {
        $(this).next('.red').remove()
    }
});
OR

 

Try this code (I just changed the structure and added return false) :
$("#Name").focus()

$("#Name, #Address").blur(function(){
    if($(this).val().length == 0){
        $(this).after('<div class="red">This field is required</div>');
    } else {
        $(this).next('.red').remove()
    }
});

But I think the best way is to add the required attribute to your fields like this :
< input type="text" name="name" required />
< input type="text" name="address" required />

Thanks
Koolprasd2003
Editor, DotNetSpider MVM
Microsoft MVP 2014 [ASP.NET/IIS]

Validate the textbox using JQuery

About dotnetspider.com

Quick Links

General

Services