Question

我有一个带有选择字段的表单，这个表单位于jquery.chosen插件下，因此选择字段是隐藏的，而不是显示带有链接的div。我在表单上显示错误的方法是将错误字段的边框设置为红色。但是在验证隐藏选择时，此方法不起作用。所以我试着在它们上面写一个自定义验证方法：

jQuery("#myform select.required").addClass('chosen_select');
jQuery.validator.addMethod('chosen_select',function(value,element){
            if (value.length==0) {
                $(element).parent().find("div.chzn-container").addClass('error');
             } else {
                $(element).parent().find("div.chzn-container").addClass('valid');
            }
            return (value.length!=0);
},'Please select something');
jQuery.validator.classRuleSettings.chosen_select = { chosen_select: true };
jQuery.validator.defaults.ignore = ".hidden";
jQuery( "#myform" ).validate();

这是有问题的HTML：

    <span>
      <select name="place" id="sel4OR" data-placeholder="place" class="chzn-done" onkeypress="pickup(this, event)" onblur="restorePos(this)" style="display: none;">
        <option value=""></option>
        <option value="Moscow">Moscow</option>
        <option value="London">London</option>
        <option value="Other">Other</option>
      </select>
    <div id="sel4OR_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch chzn-container-active" style="width: 549px;">
      <a href="javascript:void(0)" class="chzn-single chzn-default chzn-single-with-drop" tabindex="-1"><span>place</span></a>
      <div class="chzn-drop" style="left: 0px; width: 547px; top: 24px; ">
        <ul class="chzn-results">
          <li id="sel4OR_chzn_o_1" class="active-result highlighted" style="">Moscow</li>
          <li id="sel4OR_chzn_o_2" class="active-result" style="">London</li>
          <li id="sel4OR_chzn_o_3" class="active-result" style="">Other</li>
        </ul>
       </div>
      </div>
    </span>

不幸的是，这种方法不起作用。我应该写什么而不是呢？

Answer 1

我设法通过重新定义验证器的高亮和非高亮功能来解决我的问题。

    jQuery.validator.defaults.highlight = function(element, errorClass, validClass) {
                if (element.type === 'radio') {
                    this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else if (element.nodeName.toLowerCase() === 'select' &&         $(element).is(':hidden')) {
                    this.findByName(element.name).next().addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    };
    jQuery.validator.defaults.unhighlight = function(element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else if (element.nodeName.toLowerCase() === 'select' && $(element).is(':hidden')) {
            this.findByName(element.name).next().removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    }

在应用jquery.chosen时，使用jquery.validate验证选择字段的错误

1 个答案: