JS email validation still submits invalid emails

Question

I have a field where a user can submit multiple emails delimited by a comma character. I want JS validation to achieve two things:

If user tries to submit nothing, they get an alert that they have to enter an email, this WORKS
If user tries to submit any number of emails where one email is incorrectly formatted, they get an alert that one email has been improperly formatted, and they have to resubmit, this DOES NOT WORK

What happens with #2 is that if I submit something bogus like asddf as an email, I:

DO get the alert yay!
However, the form still gets submitted, BOO

Code:

$("#refer").click(function() {
  var input_emails = $('#friend_emails').val();
  if (input_emails === "") {
    alert("Please enter at least one friend's email to send invites")
    return false;
  } else {
    var parsed_emails = input_emails.split(',');
    $.each(parsed_emails, function( index, email_value ) {
      var trimmed_email = $.trim(email_value)
      var atpos = trimmed_email.indexOf("@");
      var dotpos = trimmed_email.lastIndexOf(".");
      if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=trimmed_email.length) {
        alert(trimmed_email + " " + "is not a valid email format, please correct and resubmit");
        return false;
      }
    });
  }  
});

For the second case, you don't prevent the default behavior of the `click` event in the case of an invalid email. — t.niese, Sep 18 '14 at 19:42
t.niese is right. Add `e` as an argument to the anonymous click function. Then in your code, use `e.preventDefault()` instead of `return false`. Read the docs: http://api.jquery.com/event.preventdefault/ — Bjorn, Sep 18 '14 at 19:44
@Bjorn that's not right, `return false` includes `e.preventDefault()` per this post: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false. And I've tried this solution already, didn't work — james, Sep 18 '14 at 19:56
@james: Bjorn did not say that returning `false` from the callback method does not include `preventDefault`, but as you place `return false` inside of your iterating callback, it does not have the meaning of _canceling the event_ there. You either need to move the return statement out of the iterating callback like `hair raisin` suggest, or you need to use `preventDefault()` both should work the same. If `e.preventDefault()` does not work, then you most likely did something wrong or you also need to add `e.stopPropagation()`. — t.niese, Sep 19 '14 at 05:30

hair raisin · Accepted Answer · 2014-09-18T20:29:17.590

the return in your $.each(... is returning from the internal function. you need a way to return false from your outer function. something like this

$("#refer").click(function() {
  var input_emails = $('#friend_emails').val();
  if (input_emails === "") {
    alert("Please enter at least one friend's email to send invites")
    return false;
  } else {
    var success = true;
    var parsed_emails = input_emails.split(',');
    $.each(parsed_emails, function( index, email_value ) {
      var trimmed_email = $.trim(email_value)
      var atpos = trimmed_email.indexOf("@");
      var dotpos = trimmed_email.lastIndexOf(".");
      if (atpos< 1 || dotpos=trimmed_email.length) {
        alert(trimmed_email + " " + "is not a valid email format, please correct and resubmit");
        success = false;
      }
    });
    return success;
  }

});

JS email validation still submits invalid emails

1 Answers1