當第一個隱藏'select'具有錯誤類別時，向第二個div添加錯誤類

Question

我正在使用正在驗證的表單使用jQuery驗證。

當您單擊窗體的提交按鈕並且必填字段爲空時，輸入框將添加一個「錯誤」類。

我已經使用尼斯選擇JS自定義樣式我的下拉框。它創建原始選擇的display:hidden，然後創建相同列表項目的div並對其進行設置。

當我的表單被驗證時，錯誤類被添加到表單中的原始選擇，但不是生成的div。

的代碼如下：

<select id="selector" class="selector error" name="selector" style="display: none;"> 
    <option value="hide" selected="">RSVP</option> 
    <option value="Yes">Yes</option> 
    <option value="No">No</option> 
</select> 

<div class="nice-select selector" tabindex="0"> 
    <span class="current">RSVP</span> 
    <ul class="list"> 
     <li data-value="hide" class="option selected">RSVP</li> 
     <li data-value="Yes" class="option">Yes</li> 
     <li data-value="No" class="option">No</li> 
    </ul> 
</div> 

我的jQuery驗證如下：

<script type="text/javascript"> 
jQuery.validator.addMethod('answercheck', function (value, element) { 
    return this.optional(element) || /^\b5\b$/.test(value); 
}, "Oops, wrong answer silly"); 

$.validator.addMethod("valueNotEquals", function(value, element, arg){ 
    return arg != value; 
}, "Value must not equal arg."); 

// validate contact form 
$(function() { 
    $('#contact').validate({ 
     ignore: [], 
     rules: { 
      selector: { 
       valueNotEquals: "hide" 
      }, 
      hiddenSelect: { 
       required: true, 
      }, 
      name: { 
       required: true, 
       minlength: 2 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      message: { 
       required: true 
      }, 
      answer: { 
       required: true, 
       answercheck: true 
      } 
     }, 
     messages: { 
      selector: { 
       valueNotEquals: "Please select an option" 
      }, 
      name: { 
       required: "Go on, tell us your name", 
       minlength: "Name must consist of at least 2 characters" 
      }, 
      email: { 
       required: "No email, no message" 
      }, 
      message: { 
       required: "Oops, you have to write something to send this form", 
       minlength: "Go on, tell us more" 
      }, 
      answer: { 
       required: "Oops, try again" 
      } 
     }, 

     errorElement: "span", 
     wrapper: "div", // a wrapper around the error message 
     errorPlacement: function(error, element) { 
     offset = element.offset(); 
      error.insertAfter(element) 
      error.addClass('message'); // add a class to the wrapper 
      error.css('position', 'relative'); 
      //error.css('left', offset.left + element.outerWidth()); 
      error.css('bottom', offset.bottom); 
     }, 

     submitHandler: function(form) { 
      $(form).ajaxSubmit({ 
       type:"POST", 
       data: $(form).serialize(), 
       url:"php/contact.php", 
        success: function() { 
        $('#success').fadeIn(); 
        $(form).fadeOut(500); 
       }, 
       error: function() { 
        $('#error').fadeIn(); 
       } 
      }); 
     } 
    }); 

    $('select').niceSelect(); 

    $(".selector").on("click","li",function(){ 
    $("input[name='hiddenSelect']").val($(this).data("value")); 
    var validator = $("#contact").validate(); 
    validator.form(); 
    }); 
}); 
</script> 

我jsFiddle

非常感謝！

Answer 1

highlight和unhighlight回調用於添加/刪除所有正在驗證的元素中的類。

使用條件代碼檢查正在驗證哪個元素，然後從Nice Select生成的元素中添加/刪除類。

$('#contact').validate({ 
    ignore: [], 
    rules: { ... }, 
    highlight: function(element, errorClass, validClass) { 
     // default 
     if (element.type === "radio") { 
      this.findByName(element.name).addClass(errorClass).removeClass(validClass); 
     } else { 
      $(element).addClass(errorClass).removeClass(validClass); 
     } 
     // custom 
     if (element.name === "selector") { 
      $(element).siblings('div.nice-select').addClass(errorClass).removeClass(validClass); 
     } 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
     // default 
     if (element.type === "radio") { 
      this.findByName(element.name).removeClass(errorClass).addClass(validClass); 
     } else { 
      $(element).removeClass(errorClass).addClass(validClass); 
     } 
     // custom 
     if (element.name === "selector") { 
      $(element).siblings('div.nice-select').removeClass(errorClass).addClass(validClass); 
     } 
    }, 
    // your other options, etc., .... 

以上是一個非常粗略的例子，向您展示了正確的方法。但是，它與特定的name匹配的元素非常具體。如果您在多個元素上使用Nice Select，您可能需要將條件調整爲更通用的。