0
私はいくつかのファイルのマルチアップロードを達成しようとしており、すべてがフォームにアップロードされる必要があります。私はjQuery Validationを使用しています。これは私の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>
毎回、入力に空のフィールドを受け入れます。私は間違って何をしていますか？前もって感謝します。
ありがとうございました。しかし、検証は最初の行に対してのみ機能し、残りが空の場合は送信アクションを受け入れます。私はjsでファイルの行を動的に生成しなければならないかどうか分かりません。もしそうなら、ファイルの数はdocumentsListのサイズに依存し、私はスクリプトで何をすべきか分かりません。 – MCarrilloGrasso
ああ、あなたのコード例には1つのファイルアップロード入力しかありません。あなたがしようとしていることをよりよく見られるように、コードからさらにサンプルを与えることができます。 – NickyTheWrench