【发布时间】：2022-01-24 04:41:00
【问题描述】：
我是新来的:)
我一直在尝试构建一个包含 2 个输入和一个文本区域的表单。当我检查输入时，一切正常，但是当我尝试提交表单时出现问题。即使 textarea 字段不为空，该函数也不会将我的边框更改为绿色，并且下面的文本也不会消失。 另一方面，当我在检查输入时放置一个事件监听器时 - 在用任何字母填充 textarea 后，表单会关闭。 我想不出任何解决方案，我希望事件监听器的工作方式与它在输入上的工作方式完全相同。 我希望你能理解我的问题，我附上我的代码来向你展示我的观点。 希望我能从你那里得到一些答案！ :) 谢谢！
// Formularz - the form
const form = document.querySelector('form');
const yourName = document.getElementById('name');
const email = document.getElementById('email');
const msg = document.getElementById('message');
form.addEventListener('submit', (e) => {
e.preventDefault();
checkInputs();
})
yourName.addEventListener('input', () => {
checkInputs();
})
email.addEventListener('input', () => {
checkInputs();
})
function checkInputs() {
const yourNameValue = yourName.value.trim();
const emailValue = email.value.trim();
const msgValue = msg.value.trim();
if(yourNameValue === '') {
setErrorFor(yourName, 'Name is required')
}
else {
setSuccesFor(yourName);
}
if(emailValue === "") {
setErrorFor(email, 'Email is required')
}
else if(!isEmail(emailValue)) {
setErrorFor(email, 'Email is not valid')
}
else {
setSuccesFor(email)
}
if (msgValue === "") {
setTextError(msg, 'Message is required')
}
else {
setTextSuccess(msg)
}
// zamykanie formularza - closing the form
if (yourNameValue && emailValue && msgValue) {
form.classList.add('close');
}
}
function setTextError(textarea, message) { // funkcja odpowiedzialna za textarea - function responsible for textarea
const formControl = textarea.parentElement;
const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'form-control error';
}
function setTextSuccess(textarea) {
const formControl = textarea.parentElement;
formControl.className = 'form-control success';
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small')
// add error message inside small
small.innerText = message;
// add error class
formControl.className = 'form-control error';
}
function setSuccesFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^\S+@\S+\.\S+$/.test(email);
}.form-parent {
background-color: lightblue;
color: white;
}
textarea {
resize: none;
padding: 5px;
}
form {
display: block;
margin-top: 20px;
padding: 20px 20px 0;
}
input, label, textarea {
width: 100%;
font-family: Roboto, sans-serif;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
color: black;
}
.form-control input {
display: block;
padding: 5px;
}
.form-control {
position: relative;
margin-bottom: 10px;
padding-bottom: 20px;
}
#submit {
padding: 10px 30px;
margin:10px 0 20px;
background-color: lightblue;
color: black;
border: solid white 1px;
font-family: Roboto, sans-serif;
font-size: 1rem;
}
small {
font-family: Roboto, sans-serif;
margin-top: 5px;
visibility: hidden;
color: rgb(182, 19, 19);
position: absolute;
bottom: 0;
left: 0;
}
/* input check */
.form-control.success input {
border: 2px solid green;
}
.form-control.error input {
border: 2px solid rgb(182, 19, 19);
}
.form-control.error textarea {
border: 2px solid rgb(182, 19, 19);
}
/* textarea check */
.form-control.success textarea {
border: 2px solid green;
}
.form-control.error small {
visibility: visible;
}
/* zamykanie formularza */ - closing the form
form.close {
visibility: hidden;
}<div class="form-parent">
<form action="/" method="get">
<div class="form-control">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<small></small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input id="email" type="email">
<small></small>
</div>
<div class="form-control">
<label for="message">Message</label>
<textarea id="message" cols="10" rows="10"></textarea>
<small></small>
</div>
<button id="submit" type="submit">Submit</button>
</form>
</div>【问题讨论】：
标签： javascript html forms input textarea