I have a textbox and need to be validated after onblur() event. There should be error message, if and only if the textbox is empty else no message is displayed on webpage. But I think if part of the javascript is executing each time.

<input placeholder="First Name" type="text" name="fname" onblur="validatefname()">

Javascript function

function validatefname(){
    var fn=document.getElementsByName("fname").value;
    if(fn==null || fn==""){
        document.getElementById("bubble").style.visibility="visible";
        return false;
    }
    else{
        document.getElementById("bubble").style.visibility="hidden";
        return true;
    }
}

Please let me know what went wrong here?

I have a textbox and need to be validated after onblur() event. There should be error message, if and only if the textbox is empty else no message is displayed on webpage. But I think if part of the javascript is executing each time.

<input placeholder="First Name" type="text" name="fname" onblur="validatefname()">

Javascript function

function validatefname(){
    var fn=document.getElementsByName("fname").value;
    if(fn==null || fn==""){
        document.getElementById("bubble").style.visibility="visible";
        return false;
    }
    else{
        document.getElementById("bubble").style.visibility="hidden";
        return true;
    }
}

Please let me know what went wrong here?

• javascript
• html
• css

Share Improve this question Follow edited Jun 18, 2015 at 5:59 dimo414 48.9k1919 gold badges163163 silver badges266266 bronze badges asked Jun 7, 2015 at 17:11 SanTechSanTech 12822 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

getElements by name, returns a set of DOM elements, so you need

var fn=document.getElementsByName("fname")[0].value;

You can pass the input element in the validation function as follows:

<input placeholder="First Name" type="text" name="fname" onblur="validatefname(this)">

And access the same inside your validate function as below

function validatefname(elem){ 
 var fn=elem.value; 
 if(fn==null||fn=="")
 { 
   document.getElementById("bubble").style.visibility="visible"; 
   return false; 
  } 
  else{ 
   document.getElementById("bubble").style.visibility="hidden";
    return true; 
  }
}

Now if you keep your text box empty then it will display the bubble element else not.