email input validation in Jquery

Question

I need to validate the value of an e-mail input. I have this code but it doesn't work. Could you help me please?

HTML

<input type="text" name="mail" class="mail" /> 
<button class="validate">VALIDATE</button>

JQUERY

$(document).ready(function(){
    var setMail = $(".mail").val();
    var mailVal = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; 

    $(".validate").click(function(){
        if (mailVal == setMail) {
            alert("GOOD!");
            }
            else{ 
            alert("WRONG!");
            }
   });
});

JSFiddle: DEMO

Edit the following : if (mailVal.test(setMail)) { to if (mailVal.test($(".mail").val())) { because as of now setMail is only get at page load which will be empty so you are not validating anything. — Musk
– Musk, Commented Apr 23, 2015 at 18:55
You should restructure your code in a more efficient way and bind the input field to .focusout() this way you can do a validation without requiring a click button. — Musk
– Musk, Commented Apr 23, 2015 at 19:20

Khairul Islam · Accepted Answer · 2015-04-23 19:21:09Z

2

You can use jQuery validation library. It does many validation for you with an easy implementation way. Such like-

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

documentation source link- jQuery Validation

answered Apr 23, 2015 at 19:21

Khairul Islam

1,2151 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barett · Accepted Answer · 2015-04-23 20:55:34Z

1

mailVal isn't going to equal setMail. You want to check for a match: mailVal.test($(".mail").val()) instead of the == test.

edited Apr 23, 2015 at 20:55

answered Apr 23, 2015 at 18:50

Barett

5,9546 gold badges54 silver badges57 bronze badges

1 Comment

illvm Over a year ago

I would also suggest that the input type be changed to "email" and the regex changed to be the following to follow W3C standards for email validation: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Collectives™ on Stack Overflow

email input validation in Jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related