jquery validation is not working properly
Question
I am new with Jquery.
By googling i have done following code which is not working.
I have txtLogin textbox and btnLogIn button.
I am trying simple thing. If this textbox is expty then error message should get displayed in lblLoginError.
Following is the code:
$(document).ready(function () {
$('#btnLogIn').click(function () {
var LoginId = $("#txtLogin").val();
if ($("#txtLogin").val() == "") {
$("#lblLoginError").text("Please Enter Login Id");
return false;
}
else {
$("#lblLoginError").text("");
return true;
}
});
});
My problem is>> First time when textbox is empty and i click on button it gives me error message on lable[Its working fine according to code].
Second time when i enters any thing in textbox and press button then its removing error message.[This is also fine according to code].
But Third time when i removes the entered text and then presses the button , then it does not shows me error message.
*Note: I am using .NET In that AJAX UPDATE Panel. Page does not gets refreshed each time. What can be problem?
2 answers
solution1
1 ACCPTED 2013-03-02 06:49:51
it is very useful link for jQuery validation
Example:
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
<form id="commentForm">
<input type="text" id="txtLogin" class="required"/>
<input class="submit" type="submit" value="Submit"/>
</form>
Here you can just apply class as required.
solution2
0 2013-03-02 06:38:10
Try it this way, May be some space char left 3rd time, so best way to do this is here:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$('#btnLogIn').click(function () {
var LoginId = $("#txtLogin").val();
if ($("#txtLogin").val().trim() == "") {
alert($("#txtLogin").val());
$("#lblLoginError").text("Please Enter Login Id");
return false;
}
else {
$("#lblLoginError").text("");
return true;
}
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type='text' id='txtLogin' />
<input type='button' id='btnLogIn' value="Sign In"/>
<p id='lblLoginError'></p>
</body>
</html>
Notice the if ($("#txtLogin").val().trim() == "") , trim() will eliminate space char.\\
Here is live URL to it: http://jsbin.com/igoceg/2/edit
I hope this help, let me know if problem still there.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.