0

I have a set of html input:checkbox items. One of these items has disabled attribute. Expected behavior is that jquery validation plugin will ignore input with disabled attribute, but will process validation on other elements which are not disabled.

<input type="checkbox" name="example[]" value="1" minlength="1" required="required" disabled="disabled" />
<input type="checkbox" name="example[]" value="2" minlength="1" required="required" />
<input type="checkbox" name="example[]" value="3" minlength="1" required="required" />

I've created a live example to demonstrate the behavior. http://jsfiddle.net/cVMBA/24/

The expected behavior is that at least one checkbox is selected in this case. If not, then the error should appear. Although as I can see the behavior is really strange. If you look in console you can see that at first errorPlacement function is fired and afterward unhighlight function fires. So the problem here is that error is not shown.

When you remove attribute disabled="disabled" the plugin will work as expected. Any ideas, or maybe a hack to override this behavior?

4

1 回答 1

1

The plugin is working fine regarding the disabled="disabled" attribute as demonstrated here: http://jsfiddle.net/4fShN/

Regarding your code:

$('#test_validate').validate({
    ignore : [],
    unhighlight : function(element, errorClass, validClass){
         $('#test_validate').removeClass('error-highlighted');
    },
    errorPlacement: function(error, element) {           
        $('#test_validate').addClass('error-highlighted').find('.error-div').text('Select radio button');
    },
    submitHandler: function(form) {
            alert('form ok');
    }
});

You are missing the highlight callback function, which is the complement to the unhighlight callback. You should note that errorPlacement only fires when initially placing the error label element. If you want toggling along with the error, then that's what highlight and unhighlight functions are supposed to be used for.

Also, your code is applying the class to $('#test_validate'), which contains the id of your <form> element. Typically, you apply & remove the class from the <input> element with the error by using the included element parameter.

    highlight : function(element, errorClass, validClass){
        $(element).addClass('error-highlighted');
    },
    unhighlight : function(element, errorClass, validClass){
        $(element).removeClass('error-highlighted');
    },

To make things even simpler, the above code can be removed by simply defining your validClass and errorClass options. Why can they be removed? Because the two functions above are basically the same as the default plugin behavior.

errorClass: "error-highlighted",
validClass: "valid"

See documentation: http://jqueryvalidation.org/validate

于 2013-07-28T19:09:46.280 回答