Why doesn't my Javascript Email Validation Work

Question

I made a simple form with jquery and javascript, but the email verification (makes sure it has @ or . in it, does not seem to work.

Here is the JSFiddle: http://jsfiddle.net/LCBradley3k/xqcJS/11/

Here is the code for the validation. Is it in the wrong spot?

function validateForm() {
  var x = document.forms["signup"]["email"].value;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    $('#answer').html('Not a valid email')
    return false;
  }
}

http://stackoverflow.com/a/46181/211081 - Does this not help you? — PsyKzz, Mar 06 '13 at 23:57
It's a bit confusing to understand. I'm just trying to figure out where the code above fits into my current code. — James Mitchell, Mar 07 '13 at 00:00
Look at your JS error console: *Uncaught SyntaxError: Unexpected token }* — Quentin, Mar 07 '13 at 00:00
Alfred, semicolons aren't required in jS (although they SHOULD be and it's best practice to use them). — Adam Plocher, Mar 07 '13 at 00:03
Still not working. Is it okay that jquery is mixed with Javascript? — James Mitchell, Mar 07 '13 at 00:05
@MattPsyK - that answer may be accepted and have 445 upvotes, but it's a bad answer. The regex given in that answer will reject lots of valid email addresses. Minimal validation like James Mitchell's "at least one '@' and one '.' required" is better, since the only way to *truly* validate an email address is to send an email to it. — Stephen P, Mar 07 '13 at 01:46

Iswanto San · Answer 1 · 2013-03-07T02:53:38.507

First, your code contains an error because you're missing }. Second, yo don't call validateForm when button join is clicked.

$('#join').click(function () {

            var correct = true;
            var validEmail = true;

            $('input[type="text"]').each(function (indx) {
                var $currentField = $(this);
                if ($currentField.val() === '') {
                    $currentField.addClass('empty');
                    correct = false;
                    $currentField.one('keydown', function () {
                        $currentField.removeClass('empty');
                    });
                } else {
                    $currentField.removeClass('empty');
                }

            });              

            function validateForm() {
                var x = document.forms["signup"]["email"].value;
                var atpos = x.indexOf("@");
                var dotpos = x.lastIndexOf(".");
                if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {                       
                    correct = false;
                    validEmail = false;
                }
            }

            validateForm();

            if (correct) {
                $('#answer').html('Thank You!');
                setTimeout(function () {
                    $('.inputs').hide("slide", { direction: "up" }, 1000);
                }, 2000);
            } else {
                if(validEmail)
                     $('#answer').html('Please fill highlighted fields.');
                else
                     $('#answer').html('Not a valid email');
            }
        });

Thanks so much for your help. Just one more quick question. as you can see in the code (where it says if(correct)), I have it slide up. For some reason, even when it says not a valid email, that slideUp() still goes into effect. How would I stop that from happening? — James Mitchell, Mar 07 '13 at 00:14
@JamesMitchell: you need to store the `validateForm` result..see my edited answer — Iswanto San, Mar 07 '13 at 00:19
The current code does not say "Not a valid email", it just says "Please fill highlighted fields" — James Mitchell, Mar 07 '13 at 00:25
Yes, it will show `Not a valid email` first and then replaced by `Please fill highlighted fields.` — Iswanto San, Mar 07 '13 at 01:58

Why doesn't my Javascript Email Validation Work

1 Answers1