[javascript] Validate email address textbox using JavaScript

If you wish to allow accent (see RFC 5322) and allow new domain extension like .quebec. use this expression:

/\b[a-zA-Z0-9\u00C0-\u017F._%+-]+@[a-zA-Z0-9\u00C0-\u017F.-]+\.[a-zA-Z]{2,}\b/
  • The '\u00C0-\u017F' part is for alowing accent. We use the unicode range for that.
  • The '{2,}' simply say a minimum of 2 char for the domain extension. You can replace this by '{2,63}' if you dont like the infinitive range.

Based on this article

JsFidler

_x000D_
_x000D_
$(document).ready(function() {_x000D_
var input = $('.input_field');_x000D_
var result = $('.test_result');_x000D_
        var regExpression = /\b[a-zA-Z0-9\u00C0-\u017F._%+-]+@[a-zA-Z0-9\u00C0-\u017F.-]+\.[a-zA-Z]{2,}\b/;_x000D_
    _x000D_
   $('.btnTest').click(function(){_x000D_
          var isValid = regExpression.test(input.val());_x000D_
          if (isValid)_x000D_
              result.html('<span style="color:green;">This email is valid</span>');_x000D_
           else_x000D_
              result.html('<span style="color:red;">This email is not valid</span>');_x000D_
_x000D_
   });_x000D_
_x000D_
});
_x000D_
body {_x000D_
    padding: 40px;_x000D_
}_x000D_
_x000D_
label {_x000D_
    font-weight: bold;_x000D_
}_x000D_
_x000D_
input[type=text] {_x000D_
    width: 20em_x000D_
}_x000D_
.test_result {_x000D_
  font-size:4em;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<label for="search_field">Input</label>_x000D_
<input type='text' class='input_field' />_x000D_
<button type="button" class="btnTest">_x000D_
Test_x000D_
</button>_x000D_
<br/>_x000D_
<div class="test_result">_x000D_
Not Tested_x000D_
</div>
_x000D_
_x000D_
_x000D_