jQuery: cross-browser email validation in input

Do not use regular expressions to validate email addresses

To check the validity of an e-mail address, it is enough to check if the @ character is present in the string with other characters on the sides only once :

 let isValid = ($('#inputMail').val().match(/.+?\@.+/g) || []).length === 1; 

It is a bad idea to check email with more complicated regulars. An email address can contain not only [a-zA-Z0-9-_.] , But also an incredible cloud of other characters . There are regular expressions compiled to specification , but because of their length and complexity they are unsupported. Moreover, your regular @test.longdomainname.ru users of the @i.ua , @test.longdomainname.ru and many other variations of the boxes, because domains can be either one character long or 253 characters long.

Use type=email even if cross-browser compatibility is important.

As you indicated by @Visman , you should use type=email :

 <input type="email" required> 

This attribute is very important for mobile devices. When you click on this input field, the user in many mobile browsers will change the keyboard, which will make it easier for them to enter their email address. The second important function of this attribute is some kind of validation of email. The submit event will not work if the browser considers the entered email invalid. And browsers that do not support this attribute value will work with the field as with type=text .

Result

The end result should look something like this:

 $('#registration input[type=email]').on('blur', function () { let email = $(this).val(); if (email.length > 0 && (email.match(/.+?\@.+/g) || []).length !== 1) { console.log('invalid'); alert('Вы ввели некорректный e-mail!'); } else { console.log('valid'); alert('Вы ввели корректный e-mail!'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="registration"> <input type="email" required> </form> 

JSFiddle: jsfiddle.net/terron/4r8wyuop/

I think this is $('#inputMail').val() does not return 0, but an empty string.

 $('#inputMail').blur(function() { var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([az]{2,6}\.)?[az]{2,6}$/i; if($(this).val() && !pattern.test($(this).val()) { alert('Вы ввели некорректный e-mail'); $(this).focus(); } });