validating an email with javascript

Question

I am learning about simple javascript form validation and I am just curious why my email validation is not working. I am trying to grab the information from the email input field and run my function with the RegEx in it. Any help would be appreciated.

fiddle demo: http://jsfiddle.net/6SWj4/

    (function(){


        var emailAddr = document.getElementById("f_email").value;
        console.log(emailAddr);

    //    console.log(email.test(str));
    //
    //    if(email.test(str) == true){
    //        console.log("true");
    //    }else{
    //        console.log("false");
    //    }

        myform.onsubmit = function(e){

            //Below is one example of the validateField call with an argument.
            //You must dynamically retrieve the ID name from the DOM/HTML.

            validateField(emailAddr);  //id = is the form input field ID


            e.preventDefault();
            return false;
        };


        var validateField = function(inputName){

            if (inputName.name === 'f_email'){
                var pattern = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
                var emailVal = new RegExp(pattern);
                //You will need to create an else-if statement for each input field id.  The
                //      format will be similar to the above IF statement.


            }else{
                console.log("not valide");
            }

            var pass = emailVal.test(inputName);
            console.log(pass);

            var errorMsg = inputName.nextSibling.nextSibling.nextSibling.nextSibling;

            if (!pass || inputName.value.length < 2){
                errorMsg.style.display='block';
                inputName.style.backgroundColor = 'red';
            } else if (pass && inputName.value.length > 5){
                errorMsg.style.display='none';
                inputName.style.backgroundColor = 'green';
            } else {
                errorMsg.style.display='none';
                inputName.style.backgroundColor = 'white';
            };
        };

    })();  // end wrapper

`my email validation is not working` how is it not working? Does it generate error messages? Does it just do nothing? "Doesn't work" just doesn't work for a good question. — Matt Burland, Dec 06 '13 at 21:55
Your e-mail validation really shouldn't be any more complex than "Does it have an @ symbol in it?" If it does, great - send them an e-mail including a link that they then use to verify the e-mail address is valid (and that they actually own it - you'd be surprised how many people sign up for things with an e-mail address that isn't theirs). That said... `var pass = emailVal.test(inputName);` should probably be `var pass = emailVal.test(inputName.value);` - you need to pass its value, not the actual input element. — Anthony Grist, Dec 06 '13 at 21:57
Sorry I didn't specify. There are no syntax errors. The problem is even when I enter a proper email in the field is comes back with an error. I think because I am not getting the string from the input field. — user3072159, Dec 06 '13 at 21:58
first of all, you´re getting the email value at the beggining before you write any value. You have to do the 'document.getElementById("f_email").value;' inside of "onsubmit" funcion — Sadako, Dec 06 '13 at 22:03
[You cannot validate email adresses using regular expressions](http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address) — Ingo Bürk, Dec 06 '13 at 22:14

score 0 · Answer 1 · answered Dec 06 '13 at 22:03

Your problem stems from getting the value of the input on page load, not after user has entered anything. Try:

    myform.onsubmit = function(e){

        /* get value withing submit handler*/

        var emailAddr = document.getElementById("f_email").value;
        console.log(emailAddr);

        //Below is one example of the validateField call with an argument.
        //You must dynamically retrieve the ID name from the DOM/HTML.

        validateField(emailAddr);  //id = is the form input field ID


        e.preventDefault();
        return false;
    };

ALso flaw in validateField(). Argument expected is inpuname but you are passing in email input value

score 0 · Answer 2 · answered Dec 06 '13 at 22:13

You have many errors in the code. First what i said you on the comments, you have to do the document.getElementById("f_email").value; inside of onsubmit function. You are also declaring variables inside something and using it out of it, for example emailVal that you declare inside the if. That cannot work, you have to declare it before the if. check with the javascript console these little errors.

validating an email with javascript

2 Answers2