JQueryルールが入力ファイルを検証していません

Question

ID #frmArchivosのフォームのフィールドを検証しようとしていますが、フィールドがルールを遵守していないというフォームを送信すると、私のフォームは、このように構成されています。

 <form id="frmArchivos" method="post" enctype="multipart/form-data" > 
        <input id="idHerramientas" value="" hidden="" readonly="" name="idHerramientas" /> 
        <div class="modal-body "> 
         <div class="row"> 
          <div class="col-md-12"> 
           <div class="form-group"> 
            <label for="inpArchivo">Archivo:</label> 
            <input type="file" id="inpfile" class="form-control" name="inpfile" /> 
           </div> 
          </div> 
         </div> 
        </div> 
     </form> 

そして、私のスクリプトは、これは次のとおりです。

$.validate({ 
      form: '#frmArchivos', 
      rules: { 
       inpfile: { 
        required: true, 
        extension: "docx|rtf|doc|pdf" 
       } 
      }, 
      messages: { 
       inpfile: { 
        required: "input type is required", 
        extension: "select valid input file format" 
       } 
      } 
     }); 

何が問題だろうか？私は$（ '＃frmArchivos'）。validate（）のような別のタグを試しましたが、コンソールはnodeTypeのエラーを私にスローします。 私はトラフhtmlを検証しようとしましたが、フォームを投稿するときにファイル拡張子を検証しません。

さらに詳しい情報が必要な場合は教えてください。ありがとうございます。

Answer 1

次のコードで

(function() { 
 

 
    var validator = null; 
 
    var frmArchivos = $("#frmArchivos"); 
 
    var inpfile = $("#inpfile"); 
 
    
 
    function initializeValidation() { 
 
     validator = frmArchivos.validate({ 
 
     rules: { 
 
      inpfile: { 
 
      required: true, 
 
      extension: "docx|rtf|doc|pdf" 
 
      } 
 
     }, 
 
     messages: { 
 
      inpfile: { 
 
      required: "input type is required", 
 
      extension: "select valid input file format" 
 
      } 
 
      } 
 
     }); 
 
    } 
 
    
 
    $(document).ready(function() { 
 

 
     initializeValidation(); 
 
     inpfile.change(function(){ 
 
     
 
     //Validate field 
 
     inpfile.valid(); 
 
     
 
     }); 
 

 
    }); 
 

 
})();

<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.17.0/jquery.validate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script> 
 

 
<style>label.error{color: red;}</style> 
 

 
<form id="frmArchivos" name="frmArchivos"> 
 
    <input id="idHerramientas" value="" hidden="" readonly="" name="idHerramientas" /> 
 
    <div class="modal-body "> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="form-group"> 
 
      <label for="inpArchivo">Archivo:</label> 
 
      <input type="file" id="inpfile" class="form-control" name="inpfile" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

使用するライブラリ試してみてください：
JQuery
JQueryValidate