javascript - 文件输入 : Cannot read property 'toLowerCase' of undefined 的 Jquery 表单验证器错误

Question

我在使用文件输入和 jquery 表单验证器时遇到问题，没有验证器，我的代码工作得很好(而且，没有文件输入，验证器工作完美)，但是一旦我尝试混合它们，我就会不断得到“无法读取未定义的属性‘toLowerCase’”错误，我无法弄清楚，有人可以帮我吗？

作为附加信息，在执行 form2.validate() 函数时会抛出错误，在此之前，如果我的任何必需字段(包括文件)丢失，它会按应有的方式工作。

HTML 代码:

<form class="smart-form" id="massiveUpload-form" enctype="multipart/form-data">
    <fieldset>
        <legend>Cliente:</legend>
        <div class="row">
            <section class="col col-4">
                <label class="label">Número de Cliente</label> <label for="file"
                                class="input input-file">
                    <div class="button" id="clientsButton" name="clientsButton">
                        <input type="button" data-toggle="modal" data-target="#search-clients-modal">Buscar
                    </div> <input type="text" name="clientNumber" id="clientNumber" readonly="readonly" placeholder="Número de Cliente" />
                </label>
            </section>
        </div>
        <div class="row">
            <section class="col col-4">
                <input type="hidden" name="clientId" id="clientId"> 
                <label class="label">Nombre de Contacto</label> 
                <label class="input">
                    <input type="text" name="clientFullName" id="clientFullName"
                                readonly="readonly" placeholder="Nombre completo del cliente" />
                </label>
            </section>
            <section class="col col-4">
                <label class="label">Teléfono</label> <label class="input">
                    <input type="text" name="clientPhoneNumber" id="clientPhoneNumber" readonly="readonly" placeholder="Teléfono del cliente" />
                </label>
            </section>
            <section class="col col-4">
                <label class="label">RFC</label> 
                <label class="input"> <input type="text" name="clientRFC" id="clientRFC" readonly="readonly" placeholder="RFC del cliente" /></label>
            </section>
        </div>
    </fieldset>
    <fieldset>
        <legend>Datos Generales:</legend>
        <div class="row">
            <section class="col col-6">
                <label class="label">Almacén</label>
                    <label class="select">
                        <select name="warehouse" id="warehouse">
                            <option value="">Seleccione Almacén</option>                                        
                        </select> 
                    </label>
            </section>  
            <section class="col col-6">             
                <label class="label">Tipo de objeto</label>
                    <label class="select">
                        <select name="objectType" id="objectType" >
                            <option value="" >Tipo de objeto a realizar carga masiva</option>
                            <option value="PALLET" >Pallet</option>
                            <option value="ARCHIVO" >Archivo</option>
                            <option value="EXPEDIENTE" >Expediente</option>
                            <option value="EXTRAORDINARIO" >Tamaño Extraordinario</option>
                            <option value="ACTIVE FILE" >Active File</option>
                            <option value="CONTENEDOR DIGITAL">Contenedor Digital</option>
                            <option value="BOVEDA">Bóveda</option>
                        </select>
                    </label>
            </section>
            <fieldset>
                <legend>Archivo para carga Masiva:</legend>
                <div class="row">
                    <section class="col col-6">
                        <input type="file" name="massiveFileUpload" id="massiveFileUpload"/>
                    </section>
                </div>
            </fieldset>
        </div>
        <section>
            <button id="generateMassiveUploadBtn" type="button" class="btn btn-primary btn-lg" onclick="makeMassiveUpload()" title="Realizar carga masiva">
                <i class="fa fa-fw fa-arrow-up"></i>Realizar carga masiva
            </button>
        </section>
    </fieldset>
</form>

Jquery 验证器:

function makeMassiveUpload(){
    var form2 = $("#massiveUpload-form");
    form2.validate({
        rules : {
            clientNumber : {required : true},
            warehouse : {required : true},
            objectType : {required : true},
            massiveFileUpload: {required : true}
        },
        messages : {
            clientNumber : {required : "Seleccione un cliente"},
            warehouse : {required : "Seleccione un almacén"},
            objectType : {required : "Seleccione el tipo de objeto"},
            massiveFileUpload : {required : "seleccione un archivo"}
        }
    });
    if (form2.valid()) {
        //Do something

    }

Answer 1

您有一个内联 onclick 处理程序，它正在调用您的 makeMassiveUpload() 函数。删除此 onclick 处理程序，因为它完全没有必要。

您应该只将 .validate() 方法放入 DOM 就绪函数中，因为这是插件的初始化方式。换句话说，验证插件在您单击按钮之前甚至都没有初始化。

$(document).ready(function() {  // <- DOM ready

    var form2 = $("#massiveUpload-form");
    form2.validate({  // <- initialize plugin on form
        rules : {
            clientNumber : {required : true},
            warehouse : {required : true},
            objectType : {required : true},
            massiveFileUpload: {required : true}
        },
        messages : {
            clientNumber : {required : "Seleccione un cliente"},
            warehouse : {required : "Seleccione un almacén"},
            objectType : {required : "Seleccione el tipo de objeto"},
            massiveFileUpload : {required : "seleccione un archivo"}
        }
    });

});

现在，由于提交按钮是 type="button"，因此您必须在点击时以编程方式触发验证。

$('#generateMassiveUploadBtn').on('click', function() { // <- capture click
    form2.valid();  // <- trigger validation on form
});    

或者，只需将此按钮更改为 type="submit"。

<button id="generateMassiveUploadBtn" type="submit" class="btn btn-primary btn-lg" title="Realizar carga masiva">
    <i class="fa fa-fw fa-arrow-up"></i>Realizar carga masiva
</button>

我不知道为什么您的所有字段都包含 readonly 属性。如果用户无法输入任何数据，他们应该如何与此表单交互并修复验证错误？

否则，我在您发布的代码中看不到任何会导致您描述的错误的内容。

工作演示:jsfiddle.net/v17bvjk8/1/