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 に答える