1
投稿する前にすべてのフィールドに入力があることを確認しようとしています。 私は以下のスクリプトを試してみましたが、動作していません。これを行うのが最善の方法であるかどうかはわかりません。ここJqueryを使用してJSPでフォームを検証する
は、JSPです：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="resources/js/additionFormScript.js"></script> -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Employees</title>
</head>
<body>
<br>
<div class="container">
<h3>Persons List</h3>
<table class="table table-hover table-striped">
<tr>
<th>User Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Role</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<c:forEach items="${listPersons}" var="employee">
<tr>
<td>${employee.userName}</td>
<td>${employee.firstName}</td>
<td>${employee.lastName}</td>
<td>${employee.phoneNumber}</td>
<td>${employee.role}</td>
<td><a href="<c:url value='/edit/${employee}' />">Edit</a></td>
<td><a href="<c:url value='/remove/${employee}' />">Delete</a></td>
</tr>
</c:forEach>
</table>
</div>
<!-- addition form -->
<div class="container" id="addition-form">
<h2>Create Employee</h2>
<%-- <sf:form method="post" class="form-horizontal"
action="persistEmployee" modelAttribute="employee"> --%>
<sf:form method="post" class="form-horizontal"
modelAttribute="employee" id="additionForm">
<div class="form-group">
<sf:label class="control-label col-sm-2" for="username"
path="userName">User Name:</sf:label>
<div class="col-sm-10">
<sf:input class="form-control" id="username" path="userName" />
</div>
</div>
<div class="form-group">
<sf:label class="control-label col-sm-2" for="fname"
path="firstName">First Name:</sf:label>
<div class="col-sm-10">
<sf:input class="form-control" id="fname" path="firstName" />
</div>
</div>
<div class="form-group">
<sf:label class="control-label col-sm-2" for="lname" path="lastName">Last Name:</sf:label>
<div class="col-sm-10">
<sf:input class="form-control" id="lname" path="lastName" />
</div>
</div>
<div class="form-group">
<sf:label class="control-label col-sm-2" for="pnumber"
path="phoneNumber">Phone Number</sf:label>
<div class="col-sm-10">
<sf:input class="form-control" id="pnumber" path="phoneNumber" />
</div>
</div>
<div class="form-group">
<sf:label class="control-label col-sm-2" for="role" path="role">Role</sf:label>
<div class="col-sm-10">
<sf:select path="role" multiple="multiple" class="form-control"
id="sel1">
<sf:option value="CONSULTANT"></sf:option>
<sf:option value="MANAGER"></sf:option>
<sf:option value="ADMIN"></sf:option>
</sf:select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</sf:form>
</div>
<!-- end addition form -->
<div class="container">
<button type="button" class="btn btn-primary" id="add-button">+</button>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#add-button").click(function() {
$("#addition-form").fadeIn("slow");
});
});
</script>
<script>
var formIsComplete = function() {
$(":text, select").each(function() {
if ($(this).val() === "")
return false;
});
return true;
}
$(document).ready(function() {
$("#addition-form").submit(function() {
if (formIsComplete) {
$("#addition-form").fadeOut("slow");
alert("UserAdded");
} else {
alert("Empty Fields!!");
}
});
});
</script>
</html>
私はJqueryバリデータのためにこのアプローチを断念しました。しかし、私は春のタグを使用しているので、それが私の場合に適しているかどうかはわかりません。 –