Question

I put the form validation with span in my previous example
cannot display all warning message in form validation with span

but when I use more than 1 validation on a single field then I face problem to show in span like

 var x=document.forms["reg"]["email"].value;
  var atpos=x.indexOf("@");
   var dotpos=x.lastIndexOf(".");
 if(x ==null || x=="")
 {
   document.getElementById("error2").innerHTML = "enter Email"

   $var=false;
 }
 if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
   document.getElementById("error3").innerHTML = "enter correct Email"
   $var=false;
 }

and in form field are

                <td>Email:</td>
                <td><input type="text" name="email" id="email"    /><span id="email_error" style="color:red;"></span>
                <span id="error2" style="color:red;"></span>
                <span id="error3" style="color:red;"></span></td>

If I use this code and leave the field blank then it shows both errors like
“ENTER EMAIL ENTER CORRECT EMAIL”. How can I fix this?

Answer 1

because your script is calling as soon as the page loads and there are not any values supplyed sp it runs as expected, you could place a function around it and call from for example, form onsubmit, or a inline event handler such as onblur on the email input element.

i dont know what $var is for but it is undeclared

try this

<input type="text" name="email" id="email"  onblur="checkEmailField()"/>

and the following function, this wont show “enter email” unless the user focuses on the email field then moves away from the field without entering anything.

function checkEmailField(){


 var x=document.forms["reg"]["email"].value;
  var atpos=x.indexOf("@");
   var dotpos=x.lastIndexOf(".");
if(x ==null || x=="" )
{
  document.getElementById("error2").innerHTML = "enter Email"
document.getElementById("error3").innerHTML = "";
   $var=false;
}else 

 if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length &&  x != "" && x!=null)
 {
 document.getElementById("error2").innerHTML = "";
document.getElementById("error3").innerHTML = "enter correct Email"

 $var=false;
}
}