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

Fossil · Accepted Answer · 2014-03-25 12:57:21Z

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.

FlavorScape · Accepted Answer · 2014-03-24 23:45:21Z

0

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.

edited Mar 24, 2014 at 23:45

answered Mar 24, 2014 at 23:26

FlavorScape

14.5k13 gold badges79 silver badges124 bronze badges

1 Comment

Fossil Over a year ago

Thank you @FlavorScape, for certain reasons we are using the class route to do the validation and yes the elements are in the form but wanted to do it a conditional in the class saying the checkBox1 is selected than the dropdown should be empty, if we were to use the individual rules on each page as you stated this would be a perfect solution but we have to use the class name validation, after some time made some changes and that worked will post my solution as the new answer so some one might find it useful, thank you very much for you time and help

Collectives™ on Stack Overflow

Add JQuery validation plugin custom method using param with class name

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related