Clear java script warning message

  • XOXO
  • Graduate
  • Graduate
  • XOXO
  • Posts: 180

Post 3+ Months Ago

Hi there,

I have a simple form which has four input field for name, last name , email and phone number.

I provide a warning to the user next to each field if the required field is not a valid entry.

However I cannot remove the warning on the fly (before the user submits the form) once user enters the correct pattern in each field and moves to the other field to enter the information. Is this possible with Java script?

here it is the java script that I am using:

Code: [ Select ]
 
function validateForm(){
var  firstName = document.getElementById("fname").value;
var  lastName = document.getElementById("lname").value;
var  myEmail = document.getElementById("email").value;
var  myPhone = document.getElementById("phone").value;
 
var flPattern = new RegExp("^[a-zA-Z]+$");
var ePattern  = new RegExp("^([0-9a-zA-Z]+[-._+])*[0-9a-zA-Z]+@([0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$");
var  pPattern = new RegExp("^([0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9])$");
 
    if (flPattern.test(firstName)==false ){
    document.getElementById("fwarning").style.color = "#ff0000"
    document.getElementById("fwarning").innerHTML = "This field needs to be filled and no numbers is allowed!";
   
    return false;
   
    }
 
else  if (flPattern.test(lastName)==false ){
    document.getElementById("lwarning").style.color = "#ff0000"
    document.getElementById("lwarning").innerHTML = "This field needs to be filled and no numbers is allowed!";
   
    return false;
 
}
 
 
else if  (ePattern.test(myEmail)==false ){
 
    document.getElementById("ewarning").style.color = "#ff0000"
    document.getElementById("ewarning").innerHTML = "That is not a valid Email address! ";
   
    return false;
 
}
 
else if  (pPattern.test(myPhone)==false ){
 
    document.getElementById("pwarning").style.color = "#ff0000"
    document.getElementById("pwarning").innerHTML = "That is not a valid phone number! ";
   
    return false;
 
}
 
 else {

return true;
}
}
       
 
 
 
  1.  
  2. function validateForm(){
  3. var  firstName = document.getElementById("fname").value;
  4. var  lastName = document.getElementById("lname").value;
  5. var  myEmail = document.getElementById("email").value;
  6. var  myPhone = document.getElementById("phone").value;
  7.  
  8. var flPattern = new RegExp("^[a-zA-Z]+$");
  9. var ePattern  = new RegExp("^([0-9a-zA-Z]+[-._+])*[0-9a-zA-Z]+@([0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$");
  10. var  pPattern = new RegExp("^([0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9])$");
  11.  
  12.     if (flPattern.test(firstName)==false ){
  13.     document.getElementById("fwarning").style.color = "#ff0000"
  14.     document.getElementById("fwarning").innerHTML = "This field needs to be filled and no numbers is allowed!";
  15.    
  16.     return false;
  17.    
  18.     }
  19.  
  20. else  if (flPattern.test(lastName)==false ){
  21.     document.getElementById("lwarning").style.color = "#ff0000"
  22.     document.getElementById("lwarning").innerHTML = "This field needs to be filled and no numbers is allowed!";
  23.    
  24.     return false;
  25.  
  26. }
  27.  
  28.  
  29. else if  (ePattern.test(myEmail)==false ){
  30.  
  31.     document.getElementById("ewarning").style.color = "#ff0000"
  32.     document.getElementById("ewarning").innerHTML = "That is not a valid Email address! ";
  33.    
  34.     return false;
  35.  
  36. }
  37.  
  38. else if  (pPattern.test(myPhone)==false ){
  39.  
  40.     document.getElementById("pwarning").style.color = "#ff0000"
  41.     document.getElementById("pwarning").innerHTML = "That is not a valid phone number! ";
  42.    
  43.     return false;
  44.  
  45. }
  46.  
  47.  else {
  48. return true;
  49. }
  50. }
  51.        
  52.  
  53.  
  54.  


Could somebody give me some tips please?

thanks in advance.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

you can check something like that with the "onblur" command ... which is executed the moment the element loses focus ... something like:
Code: [ Select ]
<inpout type='text' name='fname' onblur='checkname()' />

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 55 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.