Règle JQuery ne validant pas le fichier d'entrée

Question

J'essaie de valider un champ dans le formulaire avec l'ID #frmArchivos, mais lorsque je soumets le formulaire, ce champ ne respecte pas les règles. Ma forme est structurée comme ceci:

 <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> 

Et est-ce que mon script:

$.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" 
       } 
      } 
     }); 

Quel pourrait être le problème? J'ai essayé avec différentes balises comme $ ('# frmArchivos'). Validate() mais la console me renvoie une erreur de nodeType indéfini. J'ai également essayé de valider le format html mais il ne valide pas l'extension du fichier lors de la publication du formulaire.

Si vous avez besoin de plus d'informations s'il vous plaît dites-moi, et merci beaucoup.

Answer 1

Essayez avec le code suivant

(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>

bibliothèques utilisées:
JQuery
JQueryValidate