Я новичок в JavaScript.Я пытаюсь сделать простую функцию проверки для моей формы.Но у меня возникла проблема: функция не проверила все условия.Это моя страница JSP.Первые три, если условия работают, а логин и пароль - нет, форма просто отправляет без проверки.Страница из моего проекта на Java, но мне нужно выполнить проверку в JS, используя объект параметров и функцию проверки.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Add user</title>
<style type="text/css">
.hidden {
display: none;
}
.errorMessage {
display: none;
}
</style>
<script type="text/javascript">
function showHint(elId) {
var element = document.getElementById(elId);
element.style.display = 'inline';
}
function hideHint(elId) {
var element = document.getElementById(elId);
element.style.display = 'none';
}
function validate(form, options) {
var firstName = form["firstName"];
var lastName = form["lastName"];
var login = form["login"];
var password = form["password"];
if (!options["firstName"][0].isValid(firstName)) {
document.getElementById("firstNameError").style.display = 'table-row';
document.getElementById("firstNameError").innerText = options["firstName"][0].message;
return false;
}
if (!options["firstName"][1].isValid(firstName)) {
document.getElementById("firstNameError").style.display = 'table-row';
document.getElementById("firstNameError").innerText = options["firstName"][1].message;
return false;
}
if (!options["lastName"][0].isValid(lastName)) {
document.getElementById("lastNameError").style.display = 'table-row';
document.getElementById("lastNameError").innerText = options["lastName"][0].message;
return false;
}
if (!options["login"][0].isValid(login)) {
document.getElementById("loginError").style.display = 'table-row';
document.getElementById("loginError").innerText = options["loginError"][0].message;
return false;
}
if (!options["password"][0].isValid(password)) {
document.getElementById("passwordError").style.display = 'table-row';
document.getElementById("passwordError").innerText = options["passwordError"][0].message;
return false;
}
alert("all true");
return true;
}
const options = {
firstName: [
{
isValid: function (domElement) {
return domElement.value;
},
message: "The first name field is required. Please enter the name"
},
{
isValid: function (domElement) {
var letters = /^[A-Za-z]+$/;
return domElement.value.match(letters);
},
message: "The first name field should contain only letter. Numbers are not allowed"
}
],
lastName: [
{
isValid: function (domElement) {
var letters = /^[A-Za-z]+$/;
return domElement.value.match(letters);
},
message: "The last name is invalid. Please enter the correct last name"
}
],
login: [
{
isValid: function (domElement) {
var letters = /^[A-Za-z0-9]+$/;
return domElement.value.match(letters);
},
message: "The login is invalid. Please enter the correct login"
}
],
password: [
{
isValid: function (domElement) {
var letters = /^[A-Za-z0-9]+$/;
return domElement.value.match(letters);
},
message: "The password is invalid. Please enter the correct password"
}
]
};
</script>
</head>
<body>
<h3>Add information about new user</h3>
<form:form method="POST" action="${action}" modelAttribute="user" id="addUserForm"
onsubmit="return validate(this, options)">
<table>
<tr>
<td><form:label path="firstName">First name</form:label></td>
<td onmouseover=showHint("hintFirstName") onmouseout=hideHint("hintFirstName")>
<form:input path="firstName" id="firstName" name="firstName"/></td>
<td id="hintFirstName" class="hidden">Please write the first name here</td>
</tr>
<tr>
<td><p id="firstNameError" class="errorMessage"></p></td>
<td></td>
<td></td>
</tr>
<tr>
<td><form:label path="lastName">Last name</form:label></td>
<td onmouseover=showHint("hintLastName") onmouseout=hideHint("hintLastName")>
<form:input path="lastName" id="lastName" name="lastName"/></td>
<td id="hintLastName" class="hidden">Please write the last name here</td>
</tr>
<tr><td><p id="lastNameError" class="errorMessage"></p></td></tr>
<tr>
<td><form:label path="login">Login</form:label></td>
<td onmouseover=showHint("hintLogin") onmouseout=hideHint("hintLogin")>
<form:input path="login" id="login" name="login"/></td>
<td id="hintLogin" class="hidden">Please write the login here</td>
</tr>
<tr><p id="loginError" class="errorMessage"></p></tr>
<tr>
<td><form:label path="password">Password</form:label></td>
<td onmouseover=showHint("hintPassword") onmouseout=hideHint("hintPassword")>
<form:input path="password" name="password"/></td>
<td id="hintPassword" class="hidden">Please write the password here</td>
</tr>
<tr><p id="passwordError" class="errorMessage"></p></tr>
<tr>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</form:form>
<c:if test="${not empty error}">
${error}
</c:if>
</body>
</html>