Question

我正在尝试检查所有字段在提交之前是否已输入。我有以下脚本尝试这个但它不起作用。我不确定这是否是最好的办法。

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

Answer 1

尝试将您的变量更改为像bellow一样的功能，也许可以帮助您

function formIsComplete() {
    var isFormComplete=true;
    isFormComplete=$(":text, select").each(function() {
        if ($(this).val() === "")
            return false;
    });
    return isFormComplete;
}

我认为jsp中最好的验证之一用于jQuery

使用Jquery在JSP中验证表单

1 个答案: