Formularüberprüfung Dateieingabe mit jQuery funktioniert nicht

Ich versuche, ein Multiupload von einigen Dateien zu erreichen, und es erfordert, dass alle von ihnen in das Formular hochgeladen werden. Ich verwende jQuery Validation. Dies ist mein HTML-Code:Formularüberprüfung Dateieingabe mit jQuery funktioniert nicht

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

Jedes Mal akzeptiert es leere Felder in den Eingängen. Was mache ich falsch? Danke im Voraus.

Quelle

2016-09-05 MCarrilloGrasso

Es sieht aus wie es gut für mich funktioniert ...

JSFiddle DEMO

Sie gemischten Inhalt in Ihrem <head> - das ist das Problem sein könnte. Alle CDNs sollten entweder http oder https sein, d.h.:

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

Quelle

2016-09-06 04:34:28 NickyTheWrench

Das stimmt! Vielen Dank. Die Validierung funktioniert jedoch nur für die erste Zeile. Wenn der Rest leer ist, akzeptiert sie die Submit-Aktion. Ich weiß nicht, ob ich die Zeilen der Dateien dynamisch mit js generieren muss und wenn ja, hängt die Anzahl der Dateien von der Größe der documentsList ab und ich bin mir nicht sicher, was ich im Skript machen soll. – MCarrilloGrasso

Oh - nun, es gibt nur eine Datei Upload-Eingabe in Ihrem Codebeispiel - vielleicht können Sie mehr Probe aus Ihrem Code geben, damit wir besser sehen können, was Sie zu tun versuchen. – NickyTheWrench

Formularüberprüfung Dateieingabe mit jQuery funktioniert nicht

Antwort

Verwandte Themen