jQuery addClass ('error' ) 到 "jQuery Validation Plugin v1.12"内的表单字段

Question

这是 jQuery“验证”插件的一部分，我试图更改它以获得上面屏幕截图中的结果:

attributeRules: function( element ) {
        var rules = {},
                $element = $(element),
                type = element.getAttribute("type"),
                method, value;

        for (method in $.validator.methods) {

// support for <input required> in both html5 and older browsers
                if ( method === "required" ) {
                        value = element.getAttribute(method);
// Some browsers return an empty string for the required attribute
// and non-HTML5 browsers might have required="" markup
            if ( value === "" ) {
                 value = true;
         $("#alertBox").css("display", "block");
            }
// force non-HTML5 browsers to return bool
                        value = !!value;
                } else {
                        value = $element.attr(method);
                }

// convert the value to a number for number inputs, and for text for backwards compability
// allows type="date" and others to be compared as strings
                if ( /min|max/.test( method ) && ( type === null || /number|range|text/.test( type ) ) ) {
                        value = Number(value);
                }

                if ( value || value === 0 ) {
                        rules[method] = value;
                } else if ( type === method && type !== "range" ) {
// exception: the jquery validate 'range' method
// does not test for the html5 'range' type
                        rules[method] = true;
                }
        }

// maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
        if ( rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength) ) {
                delete rules.maxlength;
        }

        return rules;
},

.error {background-color:#f2dede !important;}

<div class="ro-table">

<table cellspacing="0" cellpadding="0" border="0" class="table control-group">
    <thead>
        <tr>
            <th scope="col"><h3>2. How would you rate the relevance of the topics in this module?</h3></th>

            <th scope="col">Highly relevant</th>	
            <th scope="col">Relevant</th>	
            <th scope="col">Somewhat relevant</th> 	
            <th scope="col">Irrelevant</th>
            <th scope="col" class="lastCol">Unable to<br />rate/judge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ro-question"><label></label></td>

            <input data-bind="enable: rb_enable" id="Responses_Index" name="Responses.Index" type="hidden" value="33" />
            <input data-bind="enable: rb_enable" id="Responses_33__QuestionIndex" name="Responses[33].QuestionIndex" type="hidden" value="33" />
            <input data-bind="enable: rb_enable" id="Responses_33__ParentQuestionIndex" name="Responses[33].ParentQuestionIndex" type="hidden" value="32" />


            <td>
                <label for="radios-1">
                    <input type="radio" name="Responses[33].Value" value="4" data-bind="enable: rb_enable" required/>
                    <span>Very good</span>
                </label>
            </td>
            <td>
                <label for="radios-2">
                    <input type="radio" name="Responses[33].Value" value="3" data-bind="enable: rb_enable" />
                    <span>Good</span>
                </label>
            </td>
            <td>
                <label for="radios-3">
                    <input type="radio" name="Responses[33].Value" value="2" data-bind="enable: rb_enable" />
                    <span>Poor</span>
                </label>
            </td>
            <td>
                <label for="radios-4">
                    <input type="radio" name="Responses[33].Value" value="1" data-bind="enable: rb_enable" />
                    <span>Very poor</span>
                </label>
            </td>
            <td class="lastCol">
                <label for="radios-5">
                    <input type="radio" name="Responses[33].Value" value="NA" data-bind="enable: rb_enable" />
                    <span>Unable to rate/judge</span>
                </label>
            </td>
        </tr>
    </tbody>
</table>


</div>

...这是在单击提交且表单未完成时出现的“alertBox”(有效)。

我要添加背景色的选择器是

Answer 1

将其添加到 jquery 中:

$("#myForm").validate({
            highlight: function (element, errorClass, validClass) {
                var index = $(element).index();
                var question = $(element).closest('tr').find('.ro-question');
                question.removeClass(validClass).addClass(errorClass);
                console.log('aaa');
                var question = $(element).closest('thead').find('.topAlign');
                question.removeClass(validClass).addClass(errorClass);
            },
            unhighlight: function (element, errorClass, validClass) {
                var index = $(element).index();
                var question = $(element).closest('tr').find('.ro-question');
                question.removeClass(errorClass).addClass(validClass);
                var question = $(element).closest('thead').find('.topAlign');
                question.removeClass(errorClass).addClass(validClass);
            }

})