jQuery validation custom method didn't work

Question

Hello all

I have added a method on jQuery validator like this

    $.validator.addMethod('myEqual', function (value, element) {
        return value == element.value; // this one here didn't work
        }, 'Please enter a greater year!');

    $.metadata.setType("attr", "validate");

    $("#educationForm").validate({
        showErrors: function(errorMap, errorList) {

         this.defaultShowErrors();
        },
  errorPlacement: function(error, element) {
   error.appendTo( element.parent("td").next("td") );
  },
  /*success: function(label) {
   label.text("ok!").addClass("success");
  },*/
     rules: {
      txt_end: {
       required: true,
       myEqual: "#txt_begin"
      }
     },
        submitHandler: function() {
        }
    });

the form looks like this

<div id="wrapper_form">
    <form id="educationForm" name="educationForm" method="post" action="">
    <table width="500" border="0">
      <tr>
        <td width="100">Period:</td>
        <td width="200"><input type="text" name="txt_begin" id="txt_begin" size="8" maxlength="4" class="required year ui-widget-content ui-corner-all" />&nbsp;to&nbsp;
        <input type="text" name="txt_end" id="txt_end" size="8" maxlength="4" class="required year ui-widget-content ui-corner-all" /></td>
        <td width="200"></td>
      </tr>
      <tr>
        <td colspan="2">
        <input type="submit" name="btn_submit" id="btn_submit" value="Submit" class="ui-button ui-state-default ui-corner-all" />
        <input type="button" name="btn_cancel" id="btn_cancel" value="Cancel" class="ui-button ui-state-default ui-corner-all" />
        </td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </form>
</div>

but why the custom method I added didn't work?

return value == element.value; // this one here didn't work

it always return true for any value am I missing something here? I didn't use the built in method because later in the form I would require to write another method to check for greater or equal and lower or equal ( ">=" and "<=" ) I have tested this method with greater or equal and lower or equal by replacing the "==" with ">=" or with "<=" It didn't work either

Answer 1

Why don't you use the 'equalTo' method provided by the Validate plugin?

rules {
   txt_begin : 'required' , 
   txt_end: { equalTo: '#txt_begin' }
}

You won't have to put required for txt_end as it will have to be equal to txt_begin and txt_begin is a required field.

Answer 2

Reading your code, I see that with your custom method, you are trying to compare two text inputs, you are passing a parameter to your validator: myEqual: "#txt_begin".

To do that, you have to handle the third parameter of the callback function of addMethod:

$.validator.addMethod('myEqual', function (value, element, param){// param will
    return value == $(param).val();                               // have  
}, 'Message');                                                    // "#txt_begin"