0

フォームがあり、選択ボックスを検証したいと考えています。

<div id="wwctrl_add_savedAddressId" class="wwctrl styled-select">
    <select id="add_savedAddressId" class="required savedAddress checkDropdown">
</div>

jqueryバリデーターを使用して検証しました。

  initValidation: function(){
            $(this.initVariables.formId).validate({
                  ignore: ":hidden",
                  errorElement: "div",
                  errorPlacement: function(error, element) {
                        error.insertAfter(element.parent());
                  }
            });
  }

選択ボックスが -Select- と等しい場合、エラーが返されます。

$.validator.addMethod("check_item_dropdown", function(value, element) {  
                return this.optional(element) || value != "-Select-";   
}

そのコードは機能しており、その結果

<div id="wwctrl_add_savedAddressId" class="wwctrl styled-select">
      <select id="add_savedAddressId" class="required savedAddress checkDropdown error">
</div>
<div class="error" for="add_savedAddressId" generated="true"> Select item</div>

エラークラスは次の css と同じです

select.error{
    border: 1px solid #F10016;
    height: 23px;
}

私が観察したように、jqueryバリデーターは、要素自体に「エラー」クラスを追加するものです。

問題は、選択ボックスを検証している場合、エラー クラスを選択ボックスの親 (この場合は #wwctrl_add_savedAddressId) に配置することです。これは、赤い境界線を選択ボックスではなく div に配置する必要があるためです。自体。なんで？選択ボックスのデザインには背景画像があり、選択ボックス自体はその画像の下にあるためです。

バリデーターを使用して要件を設定するにはどうすればよいですか?

注: このように検証する必要がある多くの選択ボックスがあります。ありがとうございました。

4

1 に答える 1

1

バリデーターコードにアクセスできない場合は、ハッキングしてみてください。このようなことを試してください

...
errorPlacement: function(error, element) { 
    error.insertAfter(element.parent()); 
    if (element.is('select')) {
        element.removeClass('error');
        element.parent().addClass('error');
    }
}
...
于 2012-10-02T10:19:53.180 に答える