Question

我有一个表单，我想验证我的选择框。

<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而不是选择框本身。为什么？因为我们的选择框设计有背景图像，选择框本身就在该图像下面。

如何使用验证器设置我的要求？

注意：我有很多需要像这样验证的选择框。谢谢。

Answer 1

如果您无法访问验证器代码，请尝试破解它。试试这样的事情

...
errorPlacement: function(error, element) { 
    error.insertAfter(element.parent()); 
    if (element.is('select')) {
        element.removeClass('error');
        element.parent().addClass('error');
    }
}
...

Jquery验证器错误边框

1 个答案: