how to make the validation of my web form just like yahoo registration page?

Question

i am able to display an alert msg when my form fields are empty but i want to display a red colored msg in front of empty field just like in yahoo registration form i dont know how to do this can any one explain to understand it

function validate_form ( )
{
    valid = true;


        if ( document.form.login.value == "" )
        {
            valid = false;
            document.getElementById("LoginError").visible=false;

        }
        else
        {
            document.getElementById("LoginError").visible=false;
        }
        if(document.form.password.value == "" )
        {
            valid = false;
            document.getElementById("PasswordError").visible=false;

        }
        else
        {
            document.getElementById("PasswordError").visible=false;
        }

        return valid;
}

//-->

</script>

<form name="form" method="post" action="UserLogin" onSubmit="return validate_form();">
          <table width="592" height="127" border="0">
            <tr>
              <td width="46" height="29">&nbsp;</td>
              <td colspan="3"><%! private Boolean bRecord = false;
          private Boolean bLogin = false;
       %>
                <% if(request.getAttribute("signup") != null)
            bRecord =(Boolean)request.getAttribute("signup");
        else
            bRecord = false;

        if(request.getAttribute("invalidlogin") != null)
            bLogin =(Boolean)request.getAttribute("invalidlogin");
        else
            bLogin = false;

        if(bRecord == true )
        {%>
                <font color="#336600"><b>You are Successfully Signed Up</b></font>
                <%
        request.removeAttribute("signup");
        }//end if
        if(bLogin == true )
        {%>
                <font color="#FF0000"><b>Invalid Login or Password</b></font>
                <%
        request.removeAttribute("invalidlogin");
        }//end if

      %></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td width="135"><div class="style1">LOGIN: </div></td>
              <td width="146"><input type="text" name="login"></td>
              <td width="247">*<span id="LoginError" visible="false" style="color: Red;">Enter login</span>

 </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><div class="style1">PASSWORD: </div></td>
              <td><input name="password" type="password" id="password"></td>
              <td>*<span id="PasswordError" visible="false" style="color: Red;">enter Password</span></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td align="right"><input name="Submit" type="image" class="bgtop" value="SIGN IN" src="images/btn_s.JPG" border="0"  >
              </td>
              <td>&nbsp;</td>
            </tr>
          </table>
        </form>

regards

Answer 1

You can simply add a non-visible span in front of the field

<span id="spanUsernameRequired" style="visibility: hidden; color: Red;">
     This information is required</span>
<input id="username" type="text" />
<a href="#" onclick="return validate_form();">Submit</a>

, and then make it visible when the field is empty

function validate_form()
{      
    if (document.getElementById("username").value == "")
    {
        document.getElementById("spanUsernameRequired").style.visibility = 'visible';
        return false;
    }    
    else
        document.getElementById("spanUsernameRequired").style.visibility = 'hidden';

    return true;
}