1

我有一个带有选择字段的表单，这个表单在 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>

不幸的是，这种方法不起作用。我应该写什么来代替它？

4

1 回答 1

0

我设法通过重新定义验证器的突出显示和取消突出显示功能来解决我的问题。

    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);
        }
    }
于 2012-08-14T15:06:25.443 回答