6

Here's code: 

<input id="subscribe-email" type="email" placeholder="john.doe@example.com" />
            <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.

Demuri Celidze
  • 579
  • 2
  • 7
  • 25

4 Answers4

9

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="john.doe@example.com" />

<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");
}
danii
  • 5,553
  • 2
  • 21
  • 23
  • Thanks, but no, doesn't work. Returns alert but runs other stuff too. In JSFiddle no even alert. [link](http://jsfiddle.net/Moor/j9t38/2/) – Demuri Celidze Mar 22 '13 at 00:55
  • Which browser are you testing in? I've checked my fiddle on Chrome, Firefox and Safari and the alert is showing up just fine. If you want some code to run ONLY if the email field is valid, you should add the code in an else condition. I'll update the code and the fiddle. – danii Mar 22 '13 at 08:45
  • Chrome, IE10, Opera 12. Indeed I solved my question just changed – Demuri Celidze Mar 22 '13 at 08:57
  • Great, glad to hear you got it to work. Please consider accepting the answer so this question won't remain unsolved! – danii Mar 22 '13 at 09:54
1

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)

Maen
  • 10,603
  • 3
  • 45
  • 71
  • Sorry, seems like my question is not asked clearly. new browsers validate input=email by themselves. I need to run function only if browser 'knows' that email is valid. – Demuri Celidze Mar 21 '13 at 17:04
  • Aside of that you (1) forgot the slashes around the regular expression and (2) the regex does not match valid addresses like "marketing@skd.museum". – Michael Besteck Mar 21 '13 at 18:24
  • I found RFC2822 validation pattern, added slashes, but seems like there's conflict with slashes. Here's a snapshot http://s3.hostingkartinok.com/uploads/images/2013/03/f027bc17748de792ec37d42125af9d61.png – Demuri Celidze Mar 22 '13 at 08:25
1

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

Community
  • 1
  • 1
Rice_Crisp
  • 1,242
  • 1
  • 16
  • 33
  • Sorry, seems like my question is not asked clearly. new browsers validate input=email by themselves. I need to run function only if browser 'knows' that email is valid. – Demuri Celidze Mar 21 '13 at 17:05
  • So are you looking for a way to access the value of the validation? – Rice_Crisp Mar 21 '13 at 17:26
  • If it's in a form, the submit button won't do anything until a valid email has been entered. – Rice_Crisp Mar 21 '13 at 17:27
  • Well it's onClick. Valid email or not, `onClick` event works and starts the function. I tried the solution from @Bigood but it always returns syntax error, even if I changed pattern. – Demuri Celidze Mar 21 '13 at 21:03
  • 1
    So just using submit without onClick and passing the form information via POST is not an option? Hmmm, I'm not sure. Have you looked at the answers to the question that me and Mun Mrd linked to? I've adding a different regexp to my original post. Make sure you aren't just missing something silly like a parenthesis. Let me know if you find a way to access the browser's sort of "isValid" method. – Rice_Crisp Mar 21 '13 at 21:12
  • OH MY! Just onSubmit!!! and that solved for me! it runs function only if valid now! – Demuri Celidze Mar 22 '13 at 08:51
0

u need a function that validate the email and return true or false Validate email address in JavaScript?

<button type="submit" id="subscribe-submit" onClick="javascript:validateEmail(document.getElementById('subscribe-email').value) ? omgemailgone() : alert('email is wrong dude');" />

This is a quick solution, i recommend you to do it properly, not using inline onclick js

Community
  • 1
  • 1
Keo Strife
  • 1,416
  • 3
  • 15
  • 23
  • Sorry, seems like my question is not asked clearly. new browsers validate input=email by themselves. I need to run function only if browser 'knows' that email is valid. – Demuri Celidze Mar 21 '13 at 17:02
  • 1
    html5 type=email is not compatible in safari. As a result, everyone can pass this layer of defense by download safari... javascript can be turned off so i recommend using php validation to be as secured as possible – Keo Strife Mar 23 '13 at 00:05