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:
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;
}
}
-
- 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;
- }
- }
-
-
-
-
Could somebody give me some tips please?
thanks in advance.