Question

Firstly apologies if this might touch on duplicate, however I decided to open a new question as I could not find an answer to my question, secondly please know that I'm still very much learning Javascript.

I've got a validation function that validates input fields in a form, everything is working BUT I need to validate if the email address entered is correct, I know this can be accomplished with code similar to the code below:

function validateEmail(email) 
{
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
}

How would I go about adding the above code to my existing validation function?

My code follows:

function validate(){
    //form validation

    var name=document.getElementById("name");
    var surname=document.getElementById('surname');
    var nr=document.getElementById("nr");
    var email=document.getElementById("email");

    //name
  if (name.value=='') {
    name.style.backgroundColor="red";
    name.style.color="white";
    name.value="Name is required"
    return false;
  } 

 else if(isNaN(name.value)==false){
    name.style.backgroundColor="red";
    name.style.color="white";
    name.value="Name: Only enter letters A-Z"
    return false;
  } 

      //surname
     if (surname.value == ""){
    surname.style.backgroundColor="red";
    surname.style.color="white";
    surname.value="Surname is required"
    return false;
     }

    else if(isNaN(surname.value)==false){
    surname.style.backgroundColor="red";
    surname.style.color="white";
    surname.value="Surname: Only enter letters A-Z"
    return false;
  } 
    //number
    if (nr.value=='') {
    nr.style.backgroundColor="red";
    nr.style.color="white";
    nr.value="Number is required"
    return false;
  } 

 else if(isNaN(nr.value)==true){
    nr.style.backgroundColor="red";
    nr.style.color="white";
    nr.value="Number: Only enter numbers 0-9"
    return false;
  }      
    //email
    if (email.value==""){
    email.style.backgroundColor="red";
    email.style.color="white";
    email.value="Email is required"
    return false;   
    }

     return true;
} //end function


<input type="text" id="name" value="Name" class="textbox"  name="name" onfocus="if(this.value=='Name' || this.value=='Name is required' || this.value=='Name: Only enter letters A-Z' ) this.value='';" /><br />
    <br />
    <input type="text" id="surname" value="Surname" class="textbox"  name="surname"  onfocus="if(this.value=='Surname') this.value='';"  /><br />
    <br />
    <input type="text" value="Contact Number" class="textbox" id="nr" name="nr" onfocus="if(this.value=='Contact Number') this.value='';"   /> <br />
    <br />
    <input type="text" value="Email" class="textbox" id="email" name="email"onfocus="if(this.value=='Email') this.value='';" /><br />
    <br />

 <input type="submit" name="submit" class="butt" value="Send" onclick="return validate()"  />
Était-ce utile?

La solution

Just use

email.value to get value of email

var re = /\S+@\S+\.\S+/;
if (!re.test(email.value)) { // if condition fails that is not valid email
    return false; //return false 
};

Autres conseils

try

 function validate(){
    //form validation

    var name=document.getElementById("name");
    var surname=document.getElementById('surname');
    var nr=document.getElementById("nr");
    var email=document.getElementById("email");

    //name
  if (name.value=='') {
    name.style.backgroundColor="red";
    name.style.color="white";
    name.value="Name is required"
    return false;
  } 

 else if(isNaN(name.value)==false){
    name.style.backgroundColor="red";
    name.style.color="white";
    name.value="Name: Only enter letters A-Z"
    return false;
  } 

      //surname
     if (surname.value == ""){
    surname.style.backgroundColor="red";
    surname.style.color="white";
    surname.value="Surname is required"
    return false;
     }

    else if(isNaN(surname.value)==false){
    surname.style.backgroundColor="red";
    surname.style.color="white";
    surname.value="Surname: Only enter letters A-Z"
    return false;
  } 
    //number
    if (nr.value=='') {
    nr.style.backgroundColor="red";
    nr.style.color="white";
    nr.value="Number is required"
    return false;
  } 

 else if(isNaN(nr.value)==true){
    nr.style.backgroundColor="red";
    nr.style.color="white";
    nr.value="Number: Only enter numbers 0-9"
    return false;
  }      
    //email
    if (email.value==""){
    email.style.backgroundColor="red";
    email.style.color="white";
    email.value="Email is required"
    return false;   
    }
   var re = /\S+@\S+\.\S+/;
   if (!re.test(email.value)) {
     email.style.backgroundColor="red";
    email.style.color="white";
    email.value="Email not proper"
    return false; 
   }

     return true;
} //end function
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top