Clear java script warning message

  • XOXO
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Apr 06, 2005
  • Posts: 180
  • Status: Offline

Post November 8th, 2008, 1:06 pm

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 8th, 2008, 1:06 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 20th, 2008, 11:41 pm

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()' />
Let's leave all our *plum* where it is and go live in the jungle ...

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 290 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
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.