这是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;
},
&#13;
.error {background-color:#f2dede !important;}
&#13;
<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>
&#13;
......这是&#34; alertBox&#34;单击提交时显示的表单未完成(此操作)。
我尝试添加背景颜色的选择器是
答案 0 :(得分:0)
将此添加到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);
}
})