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