CODEWITHSUNDEEP
jquery
Mostafa Elkady
Mostafa Elkady

Reputation: 5801

jquery validation problem

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

Answers (4)

Nick Craver
Nick Craver

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

Erik Philips
Erik Philips

Reputation: 54676

Check out jquery how to detect a textboxs content has changed.

Upvotes: 0

Brian Liang
Brian Liang

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

peterthegreat
peterthegreat

Reputation: 406

You prevent submit by returning false. E.g. 

if($('#name').val().trim() == "")
{
    Alert('Please write name');
    return false;
}

Upvotes: 1

Related Questions