格式化HTML中的错误验证

Question

I am trying to format the text from the error validation JavaScript below:

<script>
function validateForm()
{
    var x=document.forms["myForm"]["firstName"].value;
    if (x==null || x=="")
    {
        document.getElementById('usernameError').innerHTML = "Invalid First Name";
        return false;
    }
}
</script>

The JavaScript works as intended, but I need to format the text as it appears on the page. The following is the username field:

<fieldset class='step'>
<legend>Personal Information</legend>
<p>
    <label for="firstName">First Name: </label>
    <input type="text" name="firstName"/>
    <div id="usernameError"></div>
</p>
</fieldset>

As you can probably imaging, the JavaScript appends/inserts the text "Invalid first name", if the field is empty, however, I need it to be red (as it is an error) and indented to the right. How do I achieve that?

Answer 1

Add this in css:-

#usernameError{
color: red;
font-style: italic;
}