Make span element hidden on successful javascript validation

Question

I went in cycles on how to make span element hidden again when JavaScript check is successful. At the present time onchangeand onblurthere is a red band, indicating an error, if there is no text or numbers in the name field. This does not disappear when you enter the correct text. I'm just wondering how to delete this message when the correct text is inserted into it? The code is below.

JavaScript:

function validateName() {
    var name = form.firstname.value; 
    if (form.firstname.value == "") { 
        document.getElementById("firstnameInvalid").style.visibility = "visible";  
        return false;
    } if (/[0-9]/.test(name)) {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
        return false;  
    } 
    return true;
}

HTML form:

<form name="form" method="post" action= "userdetails.html" onsubmit="return validate(this)">

<p>First Name:<input type="text" name="firstname" onblur="validateName()" onchange="validateName()" id="name">
    <span id="firstnameInvalid" style="color:red; visibility:hidden"> First Name is Invalid </span>
</p>

Answer 1

You are on the right track.

http://jsfiddle.net/isherwood/BHe5Z/

function validateName() {
    var name = form.firstname.value;

    if (form.firstname.value == "") {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
        return false;
    } else if (/[0-9]/.test(name)) {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
        return false;
    } else {
        document.getElementById("firstnameInvalid").style.visibility = "hidden";
    }
}

This can be simplified a little by using a variable and deleting the returned data that does not seem necessary:

http://jsfiddle.net/isherwood/BHe5Z/1/

function validateName() {
    var name = form.firstname.value;

    if (name == "") {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
    } else if (/[0-9]/.test(name)) {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
    } else {
        document.getElementById("firstnameInvalid").style.visibility = "hidden";
    }
}

Answer 2

:

style="display:none" - style="display:block" -

HTML:

<p>First Name:<input type="text" name="firstname" onblur="validateName(this.value)"     onchange="validateName(this.value)" id="name">
      <span id="firstnameInvalid" style="color:red; display:none;"> First Name is Invalid </span></p>

JavaScript:

function validateName(name) {

   if (name == "")
   { 
       document.getElementById("firstnameInvalid").style.display="block";
       return false;
   }
   else if (/[0-9]/.test(name))
   {
       document.getElementById("firstnameInvalid").style.display = "none";
       return false;  
   }
   return true;
}