Reputation: 5801
I have a question related to jquery. Basically I want to do a very simple thing. I have a text input field. On submit, I want to display error message if the field is empty. I have done this way:
errMsg = "Please write name";
$("div#errMsg").css("background-color", "red");
$("div#errMsg").html(errMsg);
and in the HTML:
<div id="errMsg"></div>
<strong>Name: </strong>
<input name="name" id="name" type="text" maxlength="255" size="50" />
It works fine, however there is a problem. When I leave the field empty and it displays the error message, the error message does not go away without refreshing the page. I am trying to do it so that when there is error message, and i type something in the field, it automatically remove the error without refreshing the page.
Upvotes: 0
Views: 143
Reputation: 630637
You can attach a handler when the page first loads to the #name
element's change
event like this:
$("#name").change(function() {
//with .toggle(bool) we're only showing the element if the value's empty
$("#errMsg").toggle(this.value == "").html("Please write name");
}).change(); //call it initially, in case we started invalid
This also involves giving the <div>
CSS for styling, which is easier to maintain:
#errMsg { background-color: red; } /*could also use a class and apply that here*/
In your submit()
handler there's no need (unless you change the value programmatically), but if you feel the need to run the check again, just call .change()
to execute the handler again, like this:
$("#name").change();
Upvotes: 0
Reputation: 54676
Check out jquery how to detect a textboxs content has changed.
Upvotes: 0
Reputation: 7774
In the input textbox, you will want to detect changes to the text:
$("#name").onChange( function(event){ //Re-evaluate to see if error should be displayed} );
Upvotes: 0
Reputation: 406
You prevent submit by returning false. E.g.
if($('#name').val().trim() == "")
{
Alert('Please write name');
return false;
}
Upvotes: 1