错误显示旁边的输入，但不是在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>