文件上传后绕过 JQuery 验证

Question

我正在使用 JQuery Validate 函数来验证一个表单，该表单包含几个输入字段和两个文件上传。

表单工作正常。我可以同时提交两个文件。

然后是验证问题，事情就是这样；

如果我尝试提交一个空表单，则会针对每个必填字段显示错误消息（这没问题，这就是我最初打算做的）。 但验证规则被绕过（或提交表单）当文件上传被填写时，其余必填字段为空。

这是我的 JQuery 代码：

$(document).ready(function(){

    $("#MyForm").validate({

        errorElement: 'div',
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            },
            photo: {
                required: true
            },
            cv: {
                required: true,
                extension: "pdf|doc|docx"
            }
        },
        messages: {
            name: "Please fill in your name",
            photo: "Select your image file",
            cv: "Please upload your CV in PDF format",
            email: {
                required: "Please fill in your email address",
                email: "A valid email address should look like this: name@domain.com"
            },

        },
        submitHandler: function(form) {
            form.submit();
        }
    });

});

这是我的 HTML 代码：

<form action="submit.php" method="POST" class="form-set" id="MyForm" enctype="multipart/form-data" novalidate="novalidate" >
    <fieldset>
        <legend>Your Profile</legend>
        <label class="control-label" for="cname">Name</label>
        <div class="controls">
            <input type="text" id="cname" name="name"/>
        </div>
        <label class="control-label" for="cemail">Email</label>
        <div class="controls">
            <input type="text" id="cemail" name="email"/>
        </div>
        <label class="control-label" for="cphoto">Photo</label>
        <div class="controls">
            <input type="file" id="cphoto" name="photo">
        </div>
        <label class="control-label" for="ccv">CV</label>
        <div class="controls">
            <input type="file" name="cv" id="ccv">
        </div>
    </fieldset>
</form>

谁能指出我在哪里看？

Answer 1

两件事：

最可能的问题是您没有从 jQuery Validate 包中包含文件 additional-methods.js。这就是 extension 方法存在的地方。

其次，这只是偏好，但如果您在submitHandler 中所做的只是提交表单，那么您根本不需要拥有它 - 只需去掉该选项，它就会自动提交。

我为您的代码创建了一个工作示例，即使您正确填写了两个文件对话框，它也正确地要求输入您的姓名。 http://jsfiddle.net/ryleyb/C5k7z/