jquery validation problem

Question

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.

peterthegreat · Accepted Answer · 2010-11-29 07:47:55Z

1

You prevent submit by returning false. E.g.

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

answered Nov 29, 2010 at 7:47

peterthegreat

4063 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Liang · Accepted Answer · 2010-11-29 07:48:24Z

0

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} );

answered Nov 29, 2010 at 7:48

Brian Liang

7,79410 gold badges61 silver badges72 bronze badges

2 Comments

Erik Philips Over a year ago

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Erik Philips Over a year ago

This will not fulfil the requirement: i type something in the field, it automatically remove the error without refreshing the page.

Community · Accepted Answer · 2017-05-23 12:18:39Z

0

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

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 29, 2010 at 7:58

Erik Philips

54.8k11 gold badges133 silver badges158 bronze badges

Comments

Nick Craver · Accepted Answer · 2010-11-29 09:56:04Z

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();

Collectives™ on Stack Overflow

jquery validation problem

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related