Using depends with the jQuery Validation plugin

Question

I\'ve got a form with a bunch of textboxes that are disabled by default, then enabled by use of a checkbox next to each one.

When enabled, the values in these textbo

Answer 1

I had the exact same problem.

I solved this by having the radio-button change event handler call valid() on the entire form.

Worked perfect. The other solutions above didn't work for me.

Answer 2

Usually when doing this, I skip 'depends' and just use the required jQuery Validate rule and let it handle the checking based on the given selector, as opposed to splitting the logic between the validate rules and the checkbox click handler. I put together a quick demo of how I accomplish this, using your markup.

Really, it boils down to required:'#OneSelected:checked'. This makes the field in question required only if the expression is true. In the demo, if you submit the page right away, it works, but as you check boxes, the form is unable to submit until the checked fields are filled with some input. You could still put a .valid() call in the checkbox click handler if you want the entire form to validate upon click.

(Also, I shortened up your checkbox toggling a bit, making use of jQuery's wonderful chaining feature, though your "caching" to textBox is just as effective.)

Answer 3

Shouldn't validate the field after disabling/enabling?

jQuery('#ItemList :checkbox').click(function(event) {
        var textBox = jQuery(this).siblings(':text');

        if (!jQuery(this).attr("checked")) {
                textBox.attr('disabled', 'disabled');
                textBox.val('');
        } else {
                textBox.removeAttr('disabled');
                textBox[0].focus();
        }
        textBox.valid();    
});

Answer 4

Following @Collin Allen answer:

The problem is that if you uncheck a checkbox when it's error message is visible, the error message doesn't go away.

I have solved it by removing the error message when disabling the field.

Take Collin's demo and make the following changes to the enable/disable process:

jQuery('#ItemList :checkbox').click(function()
{
    var jqTxb = $(this).siblings(':text')
    if ($(this).attr('checked'))
    {       
        jqTxb.removeAttr('disabled').focus();
    }
    else
    {
        jqTxb.attr('disabled', 'disabled').val('');
        var obj = getErrorMsgObj(jqTxb, "");
        jqTxb.closest("form").validate().showErrors(obj);
    }
});
function getErrorMsgObj(jqField, msg)
{
    var obj = {};
    var nameOfField = jqField.attr("name");
    obj[nameOfField] = msg;
    return obj;
}

You can see I guts remove the error message from the field when disabling it

And if you are worrying about $("form").validate(), Don't! It doesn't revalidate the form it just returns the API object of the jQuery validation.

Answer 5

Depends parameter is not working correctly, I suppose documentation is out of date. I managed to get this working like this:

required : function(){ return $("#register").hasClass("open")}

Answer 6

I havent tried the validator plugin, but the fact that the message shows for a splitsecond sounds to me like a double bind, how do you call your binders? If you bind in a function try unbinding just before you start, like so:

$('#ItemList :checkbox').unbind("click");
...Rest of code here...