使用 jQuery 的表单验证文件输入不起作用

Question

我正在尝试完成一些文件的多重上传，它要求所有文件都以表格形式上传。我正在使用 jQuery Validation。这是我的 HTML 代码：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
      layout:decorator="layout">
<head>
    <title>Documentos</title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#myform").validate({
                rules: {  
                    file:{
                        required: true,
                        extension: "pdf"  
                    }  
                },
                messages: {
                     file:{
                       required: "Please select the document!",
                       accept: "You can only upload PDF files."
                    } ,
                }       
            });
        });
    </script>
</head>
<body>
    <div layout:fragment="header">
        <h1>
            <span>Empleado</span>
            <i><b th:text="${employee.name}"></b></i>
        </h1>
    </div>
    <div layout:fragment="content">
           <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        <span>Perfil</span>
                        <i><b th:text="${employee.profile.name}"></b></i>
                    </h3>
                </div>
                <form id="myform" th:action="@{'/employee/' + ${employee.id} + '/save/documents'}" enctype="multipart/form-data" method="POST" class="form-horizontal">
                    <div class="box-body">
                        <table id="files-list" class="table table-bordered table-striped">

                            <tr th:each="documento : ${documentsList}">
                                <td th:text="${document}"/>
                                <td><input type="file" name="file" id="file"/></td>
                            </tr>
                        </table>

                    </div>
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Upload Documents</button>
                    </div>
                </form>
           </div>
    </div>
</body>
</html>

每次它接受输入中的空字段。我究竟做错了什么？提前致谢。

Answer 1

它看起来对我来说很好......

JSFiddle DEMO

您的 <head> 中有混合内容 - 这可能是问题所在。所有 CDN 都应该是 http 或 https 即：

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>