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!');
    }

}

THis post might be able to help http://stackoverflow.com/questions/46155/validate-email-address-in-javascript — Alex Naspo, Nov 29 '12 at 15:27

score 3 · Accepted Answer · edited Sep 26 '17 at 02:38

3

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";
    }
}

edited Sep 26 '17 at 02:38

MD. Khairul Basar

4,976
14
41
59

answered Nov 29 '12 at 15:32

GabCas

778
8
28

how do I put it in my html code? I'm new to this and I want to know how to do this for future – SadUnicorn Nov 29 '12 at 15:50
You can add these functions to the – GabCas Nov 29 '12 at 16:11

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

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

edited May 23 '17 at 12:01

Community

1
1

answered Nov 29 '12 at 15:28

AmericanUmlaut

2,817
2
17
27

score 0 · Answer 3 · answered Nov 29 '12 at 15:35

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!

I don't know how to call this function in my html code, I'm new to javascript and I have no ideamost of the time what I'm doing. Any help masters of js?:) — SadUnicorn, Nov 29 '12 at 15:46
just add to your input field `onkeyup="mail_check()"` it should look something like `` - that should work :) — vlex, Nov 29 '12 at 21:11

dmi3y · Answer 4 · 2012-11-29T15:40:43.557

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.

Form Validation - Email/telephone number

4 Answers4