Question

The form has two check boxes (cbDeclined & cbIsOOfFac), two text fields and a drop down (txtHeight, txtWeight, ddlDevice).

If either check box is checked, then the other controls are disabled and the rules for the other do no apply. Here are the current rules:

$('form').validate({
    highlight: function (element, errorClass) {
        $(element).addClass("invalidElem");
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass("invalidElem");
    },
    errorPlacement: function (error, element) {
        var parent = element.parent();
        parent.append(error);
    },
    errorElement: "div",
    errorClass: "errorMsg"
});

function HeightWeightCtrlsEnabled() { return !cbDeclined.is(':checked') && !cbIsOOfFac.is(':checked'); }

txtHeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 3, min: 1, digits: true });
txtWeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 4, min: 1, digits: true });
ddlDevice.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); } });

function UpdateTextBoxes() {
    var disableCtrls = !HeightWeightCtrlsEnabled();

    txtHeight.prop('disabled', disableCtrls);
    txtWeight.prop('disabled', disableCtrls);
    ddlDevice.prop('disabled', disableCtrls);

    if (disableCtrls) {
        txtHeight.val('');
        txtWeight.val('');
        ddlDevice.val('');
    }
}

cbDeclined.click(function () {

    if (cbDeclined.is(':checked'))
        cbIsOOfFac.attr('checked', false);

    UpdateTextBoxes();
});

cbIsOOfFac.click(function () {

    if (cbIsOOfFac.is(':checked'))
        cbDeclined.attr('checked', false);

    UpdateTextBoxes();
});

The problem comes in when: The user enters something into txtWeight, clicks the submit to get both ddlDevice & txtHeight to highlight because they are required, then… The user clicks on either cbDeclined & cbIsOOfFac. The highlight is NOT going away. I am trying to figure out how to get the highlighting around the height and drop down to go away.

I tried to create a fully working jsFiddler, but I cannot get anything to work, though everything looks correct. here is the link (I cannot post links, so I expanded it a bit)

jsfiddle dot net/scarleton/9hDZQ/12/

If you remove the last /12/, you will see my first version that is a cut/paste from the real thing.

---

Per a suggestion I tried adding $(‘form’).valid(); a number of places.

When I added it to the end of the UpdateTextBoxes() function, they started out highlighted, not what I want.

When I added it after the click() event of either of the radio button, the text would go away, but the actual controls stayed highlighted. It looks like the function on the required property of the rule is not fully working, maybe. What is really interesting is this: When I enter a height, click , then weight and device are highlighted and have the error message under them. When I click on one of the radio buttons, the text goes away, but the highlight does not. But… The height is NOT highlighted, it stays normal.

Answer 1

Working fiddle: http://jsfiddle.net/9hDZQ/15/ (lacks your highlight CSS styles, but classes are added/removed properly)

There was no code to tell the validation plugin to re-check the form when you check one of those boxes. Adding $('form').valid(); at the bottom of each click handler to force re-validation works for me:

    cbDeclined.click(function () {

        if (cbDeclined.is(':checked'))
            cbIsOOfFac.attr('checked', false);

        UpdateTextBoxes();
        $('form').valid();
    });

    cbIsOOfFac.click(function () {

        if (cbIsOOfFac.is(':checked'))
            cbDeclined.attr('checked', false);

        UpdateTextBoxes();
        $('form').valid();            
    });