jQuery Validation equalTo not working comparing two email addresses

Question

I have my form and validation code below. Everything else is working but compare two email address does not work. It gives me

Uncaught TypeError: Cannot read property 'call' of undefined

HTMLcode and script below. I am using bootstrap 3.

        <form class="form-horizontal" id="form" >
          <fieldset>
          <legend> Dealer Registration </legend>
          <div class="form-group">
            <label for="dealer_name" class="col-sm-2 control-label">Dealership Name</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="dealer_name" name="dealer_name"  placeholder="Dealership Name">
            </div>
          </div>
          <div class="form-group">
            <label for="street" class="col-sm-2 control-label">Address</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="street" name="street" placeholder="Street number and Name">
            </div>
          </div>
          <div class="form-group">
            <label for="suburb" class="col-sm-2 control-label"></label>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="suburb" name="suburb" placeholder="Suburb">
            </div>
          </div>
          <div class="form-group">
            <label for="state" class="col-sm-2 control-label"></label>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="state" name="state" placeholder="State">
            </div>
          </div>
          <div class="form-group">
            <label for="postcode" class="col-sm-2 control-label"></label>
            <div class="col-sm-2">
              <input type="text" class="form-control" id="postcode" name="postcode" placeholder="Post Code">
            </div>
          </div>
          <div class="form-group">
            <label for="email1" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control" id="email1" name="email1" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="email2" class="col-sm-2 control-label">Confirm Email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control" id="email2" name="email2" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="first_name" class="col-sm-2 control-label">Contact</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
            </div>
          </div>
          <div class="form-group">
            <label for="last_name" class="col-sm-2 control-label"></label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-6">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Agree the terms and conditions (to do)
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-6">
              <button type="submit" class="btn btn-default">Sign in</button>
            </div>
          </div>
          </fieldset>
        </form>



        <script>
$(document).ready(function(){
    $("form").validate({
        rules: {
            dealer_name:{
                minlength: 3,
                maxlength: 50,
                required: true
            },
            street:{
                minlength: 3,
                required: true
            },
            suburb:{
                minlength: 3,
                required: true
            },
            state:{
                minlength: 1,
                required: true
            },
             postcode:{
                minlength: 4,
                maxlength: 4,
                required: true
            },          
            email1:{
                minlength: 1,
                required: true,
            },
            email2:{
                minlength: 1,
                required: true,
                email1: {
                     equalTo: '#email2'
                }
            },
            state:{
                minlength: 1,
                required: true
            },
            first_name:{
                minlength: 1,
                required: true
            },
            last_name:{
                minlength: 1,
                required: true
            }           
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    });
}); 
</script>

Can someone help ?

score 1 · Accepted Answer · answered May 23 '14 at 10:09

1

it should be

email2:{
                minlength: 1,
                required: true,
                equalTo: '#email1'
            },

answered May 23 '14 at 10:09

Coderaemon

3,619
6
27
50

Thanks. All good. I was referring to http://stackoverflow.com/questions/5147438/match-two-fields-with-jquery-validate-plugin and similar articls that was not working. – BenW May 26 '14 at 05:17

jQuery Validation equalTo not working comparing two email addresses

1 Answers1