How to validate email and alterative email?

Question

how to validate email and repeat email on same onchange in jquery?

<label class="labeln">Email Address: </label> 
<input type="email" required="" id="email" name="email" class="input1"> 
<label class="labeln">Repeat Email Address: </label> 
<input type="email" required="" id="remail" name="remail" class="input1">

Answer 1

You just need to select input1 class because they have the same class
HTML

<label class="labeln">Email Address: </label> 
<input type="email" required="" id="email" name="email" class="input1"> 
<label class="labeln">Repeat Email Address: </label> 
<input type="email" required="" id="remail" name="remail" class="input1">

Javascript

$('.input1').on('change',function(){
  //Your validation here
  //But use $(this).val() to get the value of the email

   if( !isValidEmailAddress( $(this).val() ) ) { 
    /* do stuff here */ 

   }
});

See this function by aSeptik

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
};

See also this function

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);
}

Answer 2

HTML

<label class="labeln">Email Address: </label> 
<input class="vEmail" type="email" required="" id="email" name="email"> 
<label class="labeln">Repeat Email Address: </label> 
<input class="vEmail" type="email" required="" id="remail" name="remail">
<script src="/js/jquery.validate.min.js'"></script>
<script src="/js/additional-methods.min.js"></script>

Script

$( ".vEmail" ).change(function() {
    //validate confirm email using jquery validate
    $('#myform').validate({
        rules: {
            email: 'required',
            remail: {
                equalTo: '#email'
            }
        },
        messages: {
            email: {
                required: "Please enter email"
            },
            remail: {
                equalTo: "Confirm email is not match"
            }
        }
    });
}

Answer 3

I recommend using Validator - https://github.com/chriso/validator.js, the syntax is simple:

validator.isEmail('foo@bar.com');

It's a JavaScript library that I've used (and contributed to) extensively and includes custom logic for common free mail providers like Gmail and Yahoo. These providers have their own rules, and Validator accounts for that stuff too.

A simple regex (as other answers have suggested) is ok, but email syntax is actually pretty complicated, so better to just use something more sophisticated.

You can also use an email verification API like Kickbox (disclaimer - I work there, we're awesome) if you want to be sure the email address is real and can accept incoming emails.