表單驗證文件輸入與jQuery不起作用

我試圖完成一些文件multiupload，它要求所有這些文件將被上載在窗體中。我正在使用jQuery驗證。這是我的HTML代碼：表單驗證文件輸入與jQuery不起作用

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

每次它接受輸入中的空字段。我究竟做錯了什麼？提前致謝。在

來源

2016-09-05 MCarrilloGrasso

看起來它工作得很好，我...

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>

來源

2016-09-06 04:34:28 NickyTheWrench

這是真的！謝謝。但驗證僅適用於第一行，如果其餘部分爲空，則接受提交操作。我不知道是否必須使用js動態地生成文件行，如果是這樣，文件數量取決於documentsList的大小，我不知道我應該在腳本中做什麼。 – MCarrilloGrasso

噢 - 在代碼示例中只有一個文件上傳輸入 - 也許您可以從代碼中提供更多樣本，以便我們可以更好地瞭解您要做什麼。 – NickyTheWrench

表單驗證文件輸入與jQuery不起作用

回答

相關問題