Question

I am using jQuery Validate Plugin now and have some problem with it.

My html:

<div class="card">
    <div class="item">
        <span class="label"><b class="red">*</b>CardNo:</span>
        <input class="BankCardNo" name="BankCardNo" type="text" value=""/> 
    </div>
    <div class="item">
        <span class="label"><b class="red">*</b>Confirm CardNo:</span>
        <input class="ConfirmCardNo" name="ConfirmCardNo" type="text" value=""/>
    </div>
</div>
<div class="card">
    <div class="item">
        <span class="label"><b class="red">*</b>CardNo:</span>
        <input class="BankCardNo" name="BankCardNo" type="text" value=""/> 
    </div>
    <div class="item">
        <span class="label"><b class="red">*</b>Confirm CardNo:</span>
        <input class="ConfirmCardNo" name="ConfirmCardNo" type="text" value=""/>
    </div>
</div>

I am making Bankcard Manage Page. one can add several cards at a time.

I want to make every card validate separately，
but equalTo method only accept element id,name,attr

such as

$("#myForm").validate({
  rules: {
    "Password": {
      required: true,
    },

    "ConfirmPassword": {
      required: true
      equalTo: '#Password'
    }
  },

  errorElement: "div"
});

this is validate plugin add rules, it’s very beautiful.
so I just want all validation codes like this.
this is the main problem.

If I write code like below, it can’t find the correct CardNo……

$('.card').find('.ConfirmCardNo').rules('add', {
  required: true,
  equalTo: '.CardNo'
});

how I achieve my purpose?

Answer 1

you can do it like this

var $elems = $('.card');

(function fetch(i) {
    if(i >= $elems.length) return;  // no elems left

    var $elem = $elems.eq(i);

    $($elem).find('.ConfirmCardNo').rules('add',{ 
        required:true, 
        equalTo:$($elem).find('.CardNo')
    });

    fetch(i + 1);  // next one

  })(0);  // start with first elem

or if you want to use only one plugin

you can loop through all the card div’s and make rule based on their values