Jquery - Match two email address

I'm setting up a registration form and use the jquery validation script. There are two email address input textboxes. Email 1 must match Email 2. How do we validate these two email to ensure the 2nd email match the 1st email? Hope someone could help with the validation script. Here's my textboxes coding.

<label  class="inp开发者_高级运维ut required">7. Email Address:</label>
<input name="author_email" id="author_email" class="inputclass pageRequired email" maxlength="254" title="Email address required" /> <br />

<label  class="input required">8. Confirm Email:</label> 
<input name="author_confirm_email" id="author_confirm_email" class="inputclass pageRequired email" equalTo:"#author_email" maxlength="254" title="Please confirm your email address" /> <br />

Thank you.

if($("#author_email").val() != $("#author_confirm_email").val())
{
alert("emails don't match, sucka");
}

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}
function validation(){
var firstmail  = $("#author_email").val();
var secondmail  = $("#author_confirm_email").val();
if(firstmail.length != 0){
if(!isValidEmailAddress(firstmail)){
$("#error").html('please fill first mail valid');
}

}
else
$("#error").html('first mail is required');
if(secondmail.length != 0){
if(!isValidEmailAddress(secondmail)){
$("#error").html('please fill second mail valid');
}
}
else
$("#error").html('second mail required');

if(firstmail != secondmail){
$("#error").html('mail not match');
}
}

maybe it help you to solve puzzle.

On blur of either you could check to see if they have the same values. don't forget to apply toLowercase().

You could also use a validation plugin http://docs.jquery.com/Plugins/validation

$(".email").blur(function(){
  //check to two here.
  if ($("#author_email").val() != $("#author_confirm_email").val())
  {
    //do something
  }
});

A bit late contribution, but I was working on my validation form and I'm doing like this:

both input has same class, you have 'email', so you can manipulate them this way instead of having specific ids, and you can reuse the snippet easier in another place:

if ($('.email').length == 2) {
  var first_email = $('.email').first();
  var second_email = $('.email').last();
  if (first_email.val() != '' && first_email.val() != second_email.val()) {
    console.log('emails does not match');
  }
  else{
    console.log('emails match');
  }
}

Personally i would add an input listener to both fields, then do the check both ways like this:

     $(document).ready(function () {

    $("#email_address_check").on('input', function(e){
        if ($("#email_address").val() != $("#email_address_check").val())
        {
            document.getElementById("email_match_warning").innerHTML = "<span style=\"color:red\" >Email Addresses Do Not Match</span>";
        }
        else
        {
            document.getElementById("email_match_warning").innerHTML = ""; 
        }
        });
        
    $("#email_address").on('input', function(e){
        if ($("#email_address").val() != $("#email_address_check").val())
        {
            document.getElementById("email_match_warning").innerHTML = "<span style=\"color:red\" >Email Addresses Do Not Match</span>";
        }
        else
        {
            document.getElementById("email_match_warning").innerHTML = ""; 
        }
        });
    });
    </script>