Access placeholder value (<input placeholder="Username" type="text" />) ..change text to: "username required"..

Access placeholder value (<input placeholder="Username" type="text" />) ..change text to: "username required"..

HTML5 has built-in placeholder text. Default behavior: On focus form field is empty, on blur placehoder text is there again. Once you type in something ("John").. the blur does not empty it.

Now before login button, i want client-side validation..i want to place custom text i red color: username is required.

The problem is to get the default HTML5 placeholder text back again!  Because if I put red color in there the next time someone writes..it is red.

$("#LoginButton").click(function(event)
{
    event.preventDefault();
    var user=$('input[type=text]').val();    // get user input
      
    if(!user)   // if username is empty don't make roundtrip but display error message
    { 
       $('input[type=text]').css('color', 'red').val('password required');
    }  
}


This is just basic example for one field (username). Problem is..from now on it is red..and how to get default username from placeholder back again?

Because with the default placeholder in HTML5, youdon't have to write focus/blur functions