Form Validation - Email/telephone number

Question

I have a problem with a validate function, I made it in one function only and I want to add validation of email such as @ and numbers 1-9. How do I add it?

html:

<form onsubmit="return validate();" name="formValidation">
    <label>First Name:</label>
    <input type="text" name="firstName" /><br /><br />
    <label>Last Name:</label>
    <input type="text" name="lastName" /><br /><br />
    <label>E_mail:</label>
    <input type="text" name="Email" /><br /><br />
    <label>Confirm E_mail:</label>
    <input type="text" name="confirmEmail" /><br /><br />
    <label>Address:</label>
    <input type="text" name="Address" /><br /><br />
    <label>Telephone nr:</label>
    <input type="text" name="telephoneNr" /><br /><br />
    <br />
    <p>submit your form: </p><input type="submit" value="Submit" />
</form>

js:

function validate(){
    if(document.formValidation.firstName.value == "" ||
    document.formValidation.lastName.value == "" ||
    document.formValidation.Email.value == "" ||
    document.formValidation.confirmEmail.value == "" ||
    document.formValidation.Address.value == "" ||
    document.formValidation.telephoneNr.value == "")
    {
        alert("Please fill all the boxes before submitting!");
        return false;
    } else {
        alert('Your form has been submitted!');
    }

}

Answer 1

from http://www.w3resource.com/javascript/form/email-validation.php :

This function will validate an email using javascript:

function ValidateEmail(mail)   
{  
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))  
  {  
    return (true)  
  }  
    alert("You have entered an invalid email address!")  
    return (false)  
}  

To validate a phone number:

function validatePhone(phone) {
    var error = "";
    var stripped = phone.replace(/[\(\)\.\-\ ]/g, '');

   if (stripped == "") {
        error = "You didn't enter a phone number.";
    } else if (isNaN(parseInt(stripped))) {
        phone = "";
        error = "The phone number contains illegal characters.";

    } else if (!(stripped.length == 10)) {
        phone = "";
        error = "The phone number is the wrong length. Make sure you included an area code.\n";
    }
}

Answer 2

You want to use a regular expression. There are a very large number of questions already describing how to do this:

https://stackoverflow.com/search?q=javascript+regex+phone+number+email

Answer 3

I can give you an example function I've used. It's not perfect, but it's quick and easy to set in your environment with minimal editing:

function mail_check(){
var email   = document.getElementById(\'email\').value;
var email_check = email.split("@");
if (email_check[1]){var email_check2 = email_check[1].split(".");}
if (!email_check[1] || !email_check2[0] || !email_check2[1]) {
document.getElementById(\'mail_status\').innerHTML = "<font color=red>Invalid Email address!</font>";
return false;}
else if (email_check[1] && email_check2[0] && email_check2[1]) {
document.getElementById(\'mail_status\').innerHTML = "<font color=green>Valid Email address!</font>";
return true;}
}

I guess it's obvious I have an empty span element, that gets altered live with an OnKeyUp js event (basically onkeyup calls the function, which creates the illusion the systems checks live... although it does, so I guess it's not an illusion after all - hah!)

Hope that helps. In case you want further help let me know!

Cheers!

Answer 4

This is quite common task, and way you trying solve it is what is was like a la 2008, hey it is 2013 almost here)

the first try to look up the regExp to solve it in this way.

But yeh, why not use HTML5 form validation and Modernizir for fallback on an older/unsupported browsers.

You will got native support for all modern browsers, which is faster than JS, plus well writen js which will care about it in a proper way for ones who by some reason do not have support for form validations .