我正在尝试验证一个联系人表单，但我的JavaScript都不起作用，但我想我的事件侦听器是问题所在，因为我的页面仍然会在单击按钮时刷新。它在控制台中返回了一个错误
未捕获类型错误：无法读取null 的属性"addEventListener">
const form = document.getElementById('form');
const client = document.getElementById('name');
const email = document.getElementById('email');
const message = document.getElementById('text-message');
// Show input error message
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
// Show success outline
function showSuccess(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
// Check email is valid
function checkEmail(input) {
const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSuccess(input);
} else {
showError(input, 'Email is not valid');
}
}
// Check required fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`);
} else {
showSuccess(input);
}
});
}
// Get fieldname
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Event listeners
form.addEventListener('submit', function(e) {
e.preventDefault();
checkRequired([client, email, message]);
checkEmail(email);
});.container {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 30rem;
padding: 0rem 10rem; }
.container .submit-btn {
margin-top: 4rem; }
.container input {
width: 20rem;
height: 2rem;
background-color: var(--color-blue);
border: 1px solid #0652b9;
border-color: #0652b9;
border-radius: 2.5rem;
display: block;
color: #161616;
text-indent: 15px; }
.container input:focus {
outline: 0;
border-color: #ff8b2c; }
.container textarea {
width: 20rem;
height: 10rem;
background-color: var(--color-blue);
border: 1px solid #0652b9;
border-color: #0652b9;
border-radius: 1.5rem;
color: #161616;
text-indent: 15px; }
.container textarea:focus {
outline: 0;
border-color: #ff8b2c; }
.container ::placeholder {
color: #161616;
opacity: 0.5; }
.container .form-control {
position: relative; }
.container .form-control.success input {
border-color: green; }
.container .form-control.error input {
border-color: red; }
.container .form-control small {
color: red;
bottom: 0;
left: 0;
visibility: hidden; }
.container .form-control.error small {
visibility: visible; }
button {
width: 7rem;
height: 3rem;
background: #0652b9;
border-style: none;
border-radius: 2.5rem;
color: #ffffff; }<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../css/main.css" />
</head>
<body>
<section class="container">
<form action="/" method="GET" id="form" class="form">
<div class="form-control">
<!-- <label for="name">Name</label> -->
<input type="text" id="client" placeholder="Your name">
<small>Error message</small>
</div>
<div class="form-control">
<!-- <label for="email">Email</label> -->
<input type="text" id="email" placeholder="Your email">
<small>Error message</small>
</div>
<div class="form-control">
<!-- <label for="message">Message</label> -->
<textarea name="message" id="text-message" rows="7" placeholder="Say something about your project"></textarea>
<small>Error message</small>
</div>
<button class="submit-btn" type="submit">Send message</button>
</form>
</section>
<script src="validation.js"></script>
</body>
</html>变量客户端的选择器应该是client，而不是名称
const form = document.getElementById('form');
const client = document.getElementById('client');
const email = document.getElementById('email');
const message = document.getElementById('text-message');
// Show input error message
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
// Show success outline
function showSuccess(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
// Check email is valid
function checkEmail(input) {
const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSuccess(input);
} else {
showError(input, 'Email is not valid');
}
}
// Check required fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`);
} else {
showSuccess(input);
}
});
}
// Get fieldname
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Event listeners
form.addEventListener('submit', function(e) {
e.preventDefault();
checkRequired([client, email, message]);
checkEmail(email);
});.container {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 30rem;
padding: 0rem 10rem; }
.container .submit-btn {
margin-top: 4rem; }
.container input {
width: 20rem;
height: 2rem;
background-color: var(--color-blue);
border: 1px solid #0652b9;
border-color: #0652b9;
border-radius: 2.5rem;
display: block;
color: #161616;
text-indent: 15px; }
.container input:focus {
outline: 0;
border-color: #ff8b2c; }
.container textarea {
width: 20rem;
height: 10rem;
background-color: var(--color-blue);
border: 1px solid #0652b9;
border-color: #0652b9;
border-radius: 1.5rem;
color: #161616;
text-indent: 15px; }
.container textarea:focus {
outline: 0;
border-color: #ff8b2c; }
.container ::placeholder {
color: #161616;
opacity: 0.5; }
.container .form-control {
position: relative; }
.container .form-control.success input {
border-color: green; }
.container .form-control.error input {
border-color: red; }
.container .form-control small {
color: red;
bottom: 0;
left: 0;
visibility: hidden; }
.container .form-control.error small {
visibility: visible; }
button {
width: 7rem;
height: 3rem;
background: #0652b9;
border-style: none;
border-radius: 2.5rem;
color: #ffffff; }<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../css/main.css" />
</head>
<body>
<section class="container">
<form action="/" method="GET" id="form" class="form">
<div class="form-control">
<!-- <label for="name">Name</label> -->
<input type="text" id="client" placeholder="Your name">
<small>Error message</small>
</div>
<div class="form-control">
<!-- <label for="email">Email</label> -->
<input type="text" id="email" placeholder="Your email">
<small>Error message</small>
</div>
<div class="form-control">
<!-- <label for="message">Message</label> -->
<textarea name="message" id="text-message" rows="7" placeholder="Say something about your project"></textarea>
<small>Error message</small>
</div>
<button class="submit-btn" type="submit">Send message</button>
</form>
</section>
<script src="validation.js"></script>
</body>
</html>由于出现错误，它被提交。只需更改：
const client = document.getElementById('name');
至
const client = document.getElementById('client');