Question

i have a text box that’s required. when user clicks the submit button, the validation fires and prevents the form from submitting if there’s no value entered. I want the error message to go away after the user types a value in the text box so that the user knows the value entered is valid. Right now, the validation error message stays visible after the user makes a change. I’m using jquery-validation.

Answer 1

$('input[type="text"]').on('keyup', function () {
    if (this.value === '') {
        //this input is blank
    }
});

You can set a flag for a submit event handler to check:

var error = false;
$('input[type="text"]').on('keyup', function () {
    if (this.value === '') {
        error = true;
        $(this).addClass('form-error');
    } else {
        error = false;
        $(this).removeClass('form-error');
    }
});
$('form').on('submit', function () {

    //trigger a `keyup` event on all the inputs in this form, to force validation if the input has not been changed
    $(this).find('input').trigger('keyup');
    console.log(!error);
    return !error;//will return true if there is not error, and false if there is an error
});​

Notice I used the keyup event since the value of the element will have changed by that point.

Here is a demo: http://jsfiddle.net/jasper/NawBk/

Note that .on() is new as of jQuery 1.7 and is the same in this case as .bind(): http://api.jquery.com/on

And yeah, I just realized you’re using the jQuery Validate plugin, I’ll go ahead and leave this post because I think it can still help people.