79

I am trying to validate the input for E-Mail via JQuery:

My JQuery

<script>
/* <![CDATA[ */
  jQuery(function(){
   $( ".mail" ).keyup(function() {
   var VAL = $(this).val();
   var email = new RegExp(^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$);

   if(VAL.test(email)){
   alert('Great, you entered an E-Mail-address');
   }
   });
  });
  /* ]]> */
  </script>

This won't alert even though I entered example@example.com. I already tried .test() and .match(), what did I do wrong?

Deproblemify
  • 3,340
  • 5
  • 26
  • 41

2 Answers2

108
  • Pass a string to RegExp or create a regex using the // syntax
  • Call regex.test(string), not string.test(regex)

So

jQuery(function () {
    $(".mail").keyup(function () {
        var VAL = this.value;

        var email = new RegExp('^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$');

        if (email.test(VAL)) {
            alert('Great, you entered an E-Mail-address');
        }
    });
});
H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • 6
    You can use `this.value` instead of `$(this).val()`. – James Donnelly Feb 12 '14 at 12:31
  • 3
    Take into account this will not accept lowecase letters. – Mariano Jul 29 '16 at 08:20
  • It's a case sensitive expression so `abc@abc.abc` isn't accepted while `ABC@ABC.ABC` is approved. You can modify it to `'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$'` to solve the problem but there is another issue, in this Regex `abc@abcd` without any dot is accepted! I suggest this one instead: `/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/g` but none of these expressions accept an email address when there is a hyphen in domain name like: `abc@abc-abc.com`, visit this page for the best Regex: [link](https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript) – Muhammad Musavi Dec 30 '17 at 15:51
  • 1
    When constructing a RE with `new RegExp`, if you pass a sting, you'll need to double-escape backslashes. Eg you have `\.` in your code, but that's just an unnecessary escape character - `'\.' === '.'`. Best to avoid `new RegExp` unless you need to dynamically construct a RE from a variable. – CertainPerformance Jan 04 '19 at 10:00
  • @JamesDonnelly As this is a JQuery project, the standard DOM methods should not be used when possible. So `$(this).val()` is actually the better way of getting the value. – leo848 Dec 12 '21 at 11:33
  • 1
    @leo848 `$(this).val()` just wraps `this.value` - it's one extra function call to get to the same piece of data, making it unnecessary. – James Donnelly Dec 12 '21 at 13:30
  • @JamesDonnelly the same could be said about the whole jQuery library. It's purpose is to make DOM calls more accessible for the developer. Every single method could just be done with vanilla JS DOM manipulation. The jQuery website states that you should not mix jQuery-based manipulation with vanilla DOM manipulation. This is why I think `$(this).val()` should be used here. If you are more familiar with VanillaJS you could of course also just use `this.value`. – leo848 Dec 12 '21 at 13:38
14

Change it to this:

var email = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;

This is a regular expression literal that is passed the i flag which means to be case insensitive.

Keep in mind that email address validation is hard (there is a 4 or 5 page regular expression at the end of Mastering Regular Expressions demonstrating this) and your expression certainly will not capture all valid e-mail addresses.

Sean Bright
  • 118,630
  • 17
  • 138
  • 146