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