Make span element hidden when javascript validation succeeds

Question

I am stuck on how to make a span element become hidden again when the JavaScript validation succeeds. Currently onchange and onblur a red span appears showing an error if there is no text or if there are numbers in a name field. This does not disappear when the correct text is put in. I was just wondering how to make this message disappear when the correct text is put in? 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;
}

Form HTML:

<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're on the right track.

Fiddle demo

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";
    }
}

You can simplify this a bit by using your variable and removing the returns, which don't seem to be necessary:

Fiddle demo

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

I would suggest you to use :

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

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;
}