エラーは次の入力に表示されますが、divのコンテナ

Question

に私はErrorContainerが動作しない、次のコード

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í" 
      } 
     }, 
    }); 
}); 

を持っていません。すべてのエラーは入力の隣に表示されますが、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>