Add JQuery validation plugin custom method using param with class name

Question

What I want to do:
I need to validate if a check box is selected than the drop down should be empty, using JQuery validation plugin (jqueryvalidation - bassistance) with inline class names

what I am doing:
I am trying to add a custom validation rule using JQuery validation plugin (jqueryvalidation - bassistance) and using 'shouldBeEmptyIf' in the class name for the checkbox using param

/*JS function to return status of checkbox*/
function getValue(){
    return  $('[name=checkBox1]').prop('checked');
}


/*Form element using class for validation - JQuery validation plugin*/
<input type="checkbox" name="checkBox1" class="{shouldBeEmptyIf: [getValue() , $('[name=dropDownElement]').val())=='']}">

<select name="dropDownElement" size="1" > 
          <option value="1">One</option> 
          <option value="2">Two</option> 
</select>


/*custom method added in additional-methods.js of the JQuery validation plugin*/
jQuery.validator.addMethod("shouldBeEmptyIf", function(value, element, param) {
    console.log("param[0]: " + param[0] + "  param[1]: " + param[1]);
    return ( param[0] && param[1] );
}, "This field must be empty");

Problem I am having:
I do get the value of param[0] and param[1] but they are 'cached' they stay the same even if I change the drop-down or select/unselect checkbox (also tried to add getValue() function hoping to get fresh value every time but it did not worked).

It gets the initial value when the page is loaded. Is it assigning static value when page is loaded? If so how can I achieve the solution of what I want to do using JQuery validation plugin with inline class

Any help and direction toward it will be appreciated

Thank you

Answer 1

After trying to find few different ways I ended up using this way, thought might be helpful to others if they are trying to do similar thing.

Instead of passing the value of the elements, I am passing the names of the elements (or id of the element if you want) and in the additional method itself getting the current value of those element using the passed name/id and that worked. .

Below is the updated code:

/*Updated html Form element*/
<input type="checkbox" name="checkBox1" class="{shouldBeEmptyIf: [checkBox1 , dropDownElement]}">

<select name="dropDownElement" size="1" > 
          <option value="1">One</option> 
          <option value="2">Two</option> 
</select>


/*Updated additional method*/
jQuery.validator.addMethod("shouldBeEmptyIf", function(value, element, param) {
    var valid =true;
    if($('[name='+ param[0] +']').prop('checked') && $('[name='+ param[1] +']').val()!=''){
        valid = false;
    }
    return valid; 
}, "This field must be empty");

Hope this might help.

Answer 2

Validator works best on forms. Wrap your inputs in a form.

  <form>
   <input type="checkbox" name="checkBox1">
  </form>

You have to define a validate handler:

$('#myform').validate({
    rules : {
        dropDownElement: { shouldBeEmptyIf : true }
    }
});

Then it will run the validator pre-submit. I'm sure there are other ways to bind the custom validator to individual elements, this is just a clear way of doing it. I don't think you need to define the class that way, though you can try.