Conditional jquery validation on nested inputs with custom validator

Question

I have the following HTML:

<div class='headerWithYesNo'>
    <p>Text....</p>
    <div class='choices'>
        <input type="radio" name="choices" value="yes" />
        <input type="radio" name="choices" value="no" />
    </div>
    <div class='headerWithYesNoChild hidden'>
        <input type="checkbox" />
        <input type="checkbox" />
    </div>
</div>

I have a jquery validator requiring the user to select yes or no. When the user selects yes the 'headerWithYesNoChild' div is displayed. If yes is selected I want to require a user to select one of the checkboxes. So I have added the following custom validator:

jQuery.validator.addMethod("headerWithYesNo", function(value, element) {
    //If the value === no return valid
    if (value === 'no') return true;

    var yesNoChild = $(element).closest('.headerWithYesNo').children('.headerWithYesNoChild');
    var checkedInputs = yesNoChild.find('input:checked');

    //If any inputs are checked, return valid
    if (checkedInputs.length > 0) {
        return this.optional(element);
    }

    return false;
});

I add the validator with the following JavaScript:

$('.headerWithYesNo .choices input:radio').each(function () {
    $(this).rules("add", {
        headerWithYesNo: true,
        messages: {
            headerWithYesNo: "Make a selection from the options below or select 'No'"
        }
    })
});

The only options I add to my validate function is to change the error placement:

$('form').validate({
    errorPlacement: function(error, element) {
        ... error placement logic
    }
});

This works great... with one issue. As soon as yes is selected the validation is fired, before the user has a chance to make a selection. I want the validation to fire when the user selects 'no' (to clear out any failed validation) or on form submit. How can I achieve this?

Where is your call to .validate() then? We need to see your options. — Sparky
– Sparky, Commented Apr 4, 2014 at 14:40
See all options. You could set onclick option to false to disable triggering validation when radio buttons are clicked. Then validation will only occur on blur or when the submit button is clicked. — Sparky
– Sparky, Commented Apr 4, 2014 at 15:00
@Sparky, thats a good thought but it would change the validation for all radio buttons. I have other parts of my form to validate that I do want to validate onclick. Is there a way to set onclick for just that rule? — ferics2
– ferics2, Commented Apr 4, 2014 at 15:15
You cannot assign options to fields or rules. However you can write your own function to over-ride the default and use conditionals to restrict it to certain fields, etc. — Sparky
– Sparky, Commented Apr 4, 2014 at 15:18

ferics2 · Accepted Answer · 2014-04-04 15:19:01Z

1

What I ended up doing was adding a depends to my rule:

$('.headerWithYesNo .choices input:radio').each(function () {
    $(this).rules("add", {
        headerWithYesNo: {
            depends: function(element) {
                var targetType = $(event.target).attr('type');
                if (element.value === 'no' || targetType === 'submit') {
                    return true;
                }
                return false;
            }
        },
        messages: {
            headerWithYesNo: "Make a selection from the options below or select 'No'"
        }
    })
});

So if the value of the radio is 'no' required is set to true. Or if the target is a submit input. However I think @Sparky made some good suggestions about onclick, I just couldn't figure out how to apply it to just one rule. I'm open to more feedback on this.

answered Apr 4, 2014 at 15:19

ferics2

5,4727 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditional jquery validation on nested inputs with custom validator

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related