How to use onClick ONLY if email input field is valid?

Question

Here's code:

<input id="subscribe-email" type="email" placeholder="[email protected]" />
            <button type="submit" id="subscribe-submit" onClick="javascript:omgemailgone();" />

How do I check and run JS function only if email is valid (validation by user-agent, no additional validations)?

UPDATE. New browsers can validate input=email by themselves, also there are pseudo classes :valid and :invalid. I need to run function only if browser 'knows' that email is valid.

Answer 1

You can use the .checkValidity() method of the input element (in this case, the email input field). This will return a boolean indicating wether the input is valid or not. Here is a fiddle to play with:

http://jsfiddle.net/QP4Rc/4/

And the code:

<input id="subscribe-email" type="email" required="required" placeholder="[email protected]" />

<button type="submit" id="subscribe-submit" onClick="check()">
click me
</button>

function check()
{
  if(!document.getElementById("subscribe-email").checkValidity())
  {

    //do stuff here ie. show errors
    alert("input not valid!");

  }else
  {
      callMeIfValid();
  }
}

function callMeIfValid()
{
  //submit form or whatever
  alert("valid input");
}

Answer 2

check Validate email address in JavaScript? for validation and then implement it into an if statement in your omgemailgone method (if valid continue, else do nothing)

edit:

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\
".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

from the link

Answer 3

You can use Regular expressions to check that the email is valid on your omgemailgone() :

function omgemailgone (){
   var mail = $('#subscribe-email').val();

   //Example of regular expression
   if(mail.match(/YourRegexp/)
   {
      //Do stuff
   }
   else alert("Invalid e-mail");

}

(using jQuery here)