錯誤顯示旁邊的輸入，但不是在div容器

Question

我有以下代碼

jQuery.validator.addMethod("notEqualTo", function(element, value, param){ 
    return this.optional(element) || value != param; 
}); 

$(document).ready(function(){ 
    $("#testform").validate({ 
     onkeyup: function(element){$(element).valid()}, 
     onfocusout: false, 
     errorContainer: "#errors", 
     rules: { 
      firstname: { 
       minlength: 3, 
       required: true 
      }, 
      surname: { 
       minlength: 2, 
       required: true 
      }, 
      gender: { 
       required: true, 
       notEqualTo: "select" 
      } 
     }, 
     messages: { 
      firstname: { 
       required: "Zadejte své jméno", 
       minlength: "Jméno musí mít délku alespoň 3 znaky" 
      }, 
      surname: { 
       required: "Zadejte své příjmení", 
       minlength: "Jméno musí mít délku alespoň 2 znaky" 
      }, 
      gender: { 
       notEqualTo: "Zvolte pohlaví" 
      } 
     }, 
    }); 
}); 

ErrorContainer不起作用。所有錯誤都顯示在輸入旁邊，但不顯示在div容器中。但我的表格中有<div id="errors"></div>。 Web瀏覽器的控制檯不顯示語法錯誤。

Answer 1

從文檔：

用途是否有錯誤消息的附加容器。作爲errorContainer給出的元素都會在發生錯誤時顯示和隱藏。但是，錯誤標籤本身會添加到以errorLabelContainer給出的元素中，這裏是一個無序列表。

這意味着如果您提供errorContainer您還需要提供errorLabelContainer。或者，您可以單獨使用errorLabelContainer。試試這個：

jQuery.validator.addMethod("notEqualTo", function(element, value, param){ 
 
    return this.optional(element) || value != param; 
 
}); 
 

 
$(document).ready(function(){ 
 
    $("#testform").validate({ 
 
     onkeyup: function(element){$(element).valid()}, 
 
     onfocusout: false, 
 
     errorLabelContainer: "#errors", 
 
     rules: { 
 
      firstname: { 
 
       minlength: 3, 
 
       required: true 
 
      }, 
 
      surname: { 
 
       minlength: 2, 
 
       required: true 
 
      }, 
 
      gender: { 
 
       required: true, 
 
       notEqualTo: "select" 
 
      } 
 
     }, 
 
     messages: { 
 
      firstname: { 
 
       required: "Zadejte své jméno", 
 
       minlength: "Jméno musí mít délku alespoň 3 znaky" 
 
      }, 
 
      surname: { 
 
       required: "Zadejte své příjmení", 
 
       minlength: "Jméno musí mít délku alespoň 2 znaky" 
 
      }, 
 
      gender: { 
 
       notEqualTo: "Zvolte pohlaví" 
 
      } 
 
     }, 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script> 
 
<div id="errors"></div> 
 

 
<form id="testform"> 
 
    <input name="firstname" /> 
 
    <input name="surname" /> 
 
    <input name="gender" /> 
 
    <button>Submit</button> 
 
</form>