Question

我正在尝试验证我已编写JSP的表单中的席位数，前提是servlet。现在我正在尝试用JS进行验证，我做错了。

<script>
window.onload = function() {//zorgt ervoor dat eerst html-document wordt geladen vooraleer functies worden aangesproken

    console.log("voor vrijePlaatsen");

    function validate_form(e) {
        console.log("in validate");

        var plaatsen = document.getElementById("plaatsen");
        var vrijePlaatsen = document.getElementById("beschikbaar");

        console.log(plaatsen.value);
        console.log(vrijePlaatsen.value);

        if (plaatsen.value === "") {
            alert("Gelieve een aantal plaatsen te reserveren");
            plaatsen.focus();
            e.preventDefault();
        }
        else if (plaatsen.value < 0) {
            alert("Geef een positief aantal plaatsen in");
            plaatsen.focus();
            e.preventDefault();
        }
        else if (plaatsen.value > vrijePlaatsen.value) {
            alert("U kan slechts " + vrijePlaatsen.value + " plaatsen reserveren./nU probeerde er " + vrijePlaatsen.value + " te reserveren");
            plaatsen.focus();
            e.preventDefault();
        }
        else if (isNaN(plaatsen.value)) {
            alert("Gelieve een getal in te geven.")
            plaatsen.focus();
            e.preventDefault();
        }
        return true;
    }

}

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Cultuurhuis - Reservaties</title>
    <link rel="stylesheet" href="${contextPath}/CSS/default.css"/>
</head>
<body>
    <div id="container">
        <div id="titel">
            <h1>Het Cultuurhuis: Reserveren</h1>
        </div>

        <c:url value="/images/reserveren.png" var="imgReservering"/>
        <img src="${imgReservering}"/>
        <div id="content">
            <c:url value="/voorstellingen" var="voorstellingen"/>
            <a href="${voorstellingen}">voorstellingen</a>

            <form method="post" action="${contextPath}/reservaties" >

                <p id="voorstelling">Voorstelling:</p>
                ${voorstelling.titel}<br/>
                <p>Uitvoerders: </p>
                ${voorstelling.uitvoerders}<br/>
                <p>Datum: </p>
                ${voorstelling.datum}<br/>
                <p>Prijs:</p>
                ${voorstelling.prijs}<br/>
                <p>Vrije Plaatsen</p>
                <p id ="beschikbaar">${voorstelling.vrijePlaatsen}</p><br/>
                <br/>
                <label>Plaatsen<br/>
                    <c:choose >
                        <c:when test="${not empty alGereserveerd}">
                            <c:set value="${alGereserveerd}" var="ingevuldePlaatsen"/>
                        </c:when>
                        <c:otherwise>
                            <c:set var="ingevuldePlaatsen" value="${param.plaatsen}"/>
                        </c:otherwise>
                    </c:choose>
                    <input id="plaatsen" type="text" name="plaatsen" value="${ingevuldePlaatsen}" autofocus/>
                </label>
                <input id="submitknop" type="submit" value="reserveren" onclick="return validate_form();" />
                <p id="fout"></p>
                <!--<span id="fout">${fouten}</span>-->
            </form>
        </div>
    </div>



</body>

Answer 1

更改

<form method="post" action="${contextPath}/reservaties" >

到

<form method="post" action="${contextPath}/reservaties" onsubmit="return validate_form();">

另外将validate_form功能移出onload范围，或使用事件监听器将其附加到onload

中的表单

此外，请在将来解释您的问题，以便人们不必为自己解决问题：）

Answer 2

有两个问题。

您在点击提交按钮时尝试拨打validate_form，但如果通过其他方式提交表单则不会。
validate_form不是全局的，因此，当您尝试调用它时，会出现引用错误。

当函数在范围内时，使用Javascript将事件处理程序绑定到表单的提交。

document.getElementsByTagName('form')[0].addEventListener('submit', validate_form);

function validate_form(e) {
        console.log("in validate");

我会在表单中添加一个ID，以便更轻松地使用JavaScript进行选择。

JS验证不起作用

2 个答案: