Question

Please check out the code

HTML Code:

First Name: <input type="text" name="fname" id="fname" >
<p id='p1'></p> 

Last Name: <input type="text" name="lname" id="fname" >

<input type="submit" name="submit" value="Submit" onclick="return validate_form();" >

Validation Code:

function validate_form()
{
    if ( document.form.fname.value == "" )
    {
        $('#p1').val("Please fill in fname");
        return false;
    }
}

I created a form in which there are two textboxes (fname,lname). Now suppose I kept textbox1 vacant and then I press tab to go on next textbox.As I move to second textbox, on the right side of textbox1 a error message should be displayed (plz fill fname box)

Plz check the coading and correct it..My code is not displayed here proeprly..how to copy – paste code here so that it can be visible proerly..I am new so plz…

Answer 1

The event you’re looking to trigger on is called ‘blur’ and can be hooked up like this:

<input type="text" name="fname" id="fname" onblur="javascript:validate_form();" />

Or in jQuery:

$(function() {
  $('#fname').blur(validate_form);
});

Now the ‘validate_form’ function will be hooked in to the “blur” action on your fname field.

To post code on StackOverflow highlight the code portions of your questions and answers and click the button labeled “101010” to block it as code.

Also see theraccoonbear’s comment on using .html() instead of .val().

EDIT: Added jQuery version and kept old input for up-voters.