Javascript：如何让表单的'required'部分工作？

Question

我第一次尝试注册页面，使用所需的元素。令人沮丧的是，这是工作之前，但我想我改变了一些东西，现在它不，我不知道我在这里错过了什么。

我想要发生的事情:当我点击提交按钮时，会发生两件事中的一件。它会告诉我没有输入所需的值而不提交(如果我将值保留为空)，或者它会提交(如果我已经输入了值)并将内容更改为'thanks'并将创建一个用户对象，该对象将被添加到数组中。

目前正在发生的事情:我只能得到一个或另一个工作，这取决于我如何查询选择输入类型=提交按钮。如果我有const submitButton = document.querySelector('button[type=submit]');，它确保我需要所需的值来触发事件监听器，但它实际上不会触发事件，我在控制台上得到这个:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

如果我拿走按钮，并有const submitButton = document.querySelector('[type=submit]');事件触发，因为它应该(去感谢你的消息，使一个对象，添加到列表)，但它不会阻止它提交，如果所需的值是空的。

我已经尝试了各种方法重写它(包括'[type="submit"]')，但它不工作，我想我错过了一些简单的东西在这里?任何帮助都是感激的。CSS完全可以工作，所以我将粘贴我的html和js，以防有人需要它。

HTML:

<div class="rightside-content">
<div class="signup-title">
<h1>Sign up</h1>
</div>
<form class="join-form">
<ul>
<li><input type="text" name="username" class="username" placeholder="Username" required></li>
<li><input type="text" name="fullname" class="fullname" placeholder="Full Name" required></li>

<li><input type="email" name="email" class="email" placeholder="Email Address" pattern="[e-mail]" required></li>

<li><input type="text" name="phone" class="phone" placeholder="Phone Number" required></li>
<li><input type="text" name="postcode" class="postcode" placeholder="Post Code" required></li>

<li><input type="password" name="password" class="password" placeholder="Enter a password" required></li>
</ul>
<input type="submit">
</form>
</div>
</div>
</div>

JS:

const submitButton = document.querySelector('[type="submit"]');
const registerForm = document.querySelector(".rightside-content");
const userName = document.querySelector(".username");
const fullName = document.querySelector(".fullname");
const emailAddress = document.querySelector(".email");
const contactNumber = document.querySelector(".phone");
const postCode = document.querySelector(".postcode");
const Password = document.querySelector(".password");
let users = [];
let user = {userName: userName.value, fullName: fullName.value, emailAddress: emailAddress.value, contactNumber: contactNumber.value, postCode: postCode.value, Password: Password.value};
let count = 0;
submitButton.addEventListener("click", (e) =>{
e.preventDefault();
user.userName = userName.value;
user.fullName = fullName.value;
user.emailAddress = emailAddress.value;
user.contactNumber = Number(contactNumber.value);
user.postCode = Number(postCode.value);
user.Password = Password.value;
users.push(user);
console.log(users);
console.log(users.length);
registerForm.innerHTML = 'Thank you for joining!';
registerForm.style.fontSize = '1.5rem';
registerForm.style.fontFamily = 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
registerForm.style.textAlign = 'center';
registerForm.style.marginTop = '50%'; 

users[count] = user;
count = count + 1;
})

为未来的人编辑:一对答案有很大帮助，但如果你需要继续使用[addEventListener]元素，我发现将它作为formname.addeventlistener("submit"....)也解决了我的问题(如建议)AchoVasilev评论)

Answer 1

下面的代码可以用更少的代码编写和维护来完成这项工作:

const users=[], msg=document.getElementById("msg");
document.querySelector("form").onsubmit=ev=>{let usr;
users.push(usr=Object.fromEntries( [...ev.target.querySelectorAll("ul input")].map(e=>[e.name,e.value])));
console.log(users);
msg.textContent=`Thank you for joining, ${usr.fullname}!`
return false;
}

form li {display:block}

<div class="rightside-content">
<div class="signup-title">
<h1>Sign up</h1>
</div>
<form class="join-form">
<ul>
<li><input type="text" name="username" class="username" placeholder="Username" required></li>
<li><input type="text" name="fullname" class="fullname" placeholder="Full Name" required></li>
<li><input type="email" name="email" class="email" placeholder="Email Address" pattern="[e-mail]" required value="[e-mail]"></li>
<li><input type="text" name="phone" class="phone" placeholder="Phone Number" required></li>
<li><input type="text" name="postcode" class="postcode" placeholder="Post Code" required></li>
<li><input type="password" name="password" class="password" placeholder="Enter a password" required></li>
</ul>
<input type="submit">
</form>
<div id="msg"></div>
</div>

Answer 2

在表单上添加onsubmit事件，像这样:

<form class="join-form" onsubmit="event.preventDefault(); return fn(this)">

更换你的submitButton.addEventListener("click", (e) =>{....}使用以下功能。

function fn(e) {
user.userName = userName.value;
user.fullName = fullName.value;
user.emailAddress = emailAddress.value;
user.contactNumber = Number(contactNumber.value);
user.postCode = Number(postCode.value);
user.Password = Password.value;
users.push(user);
console.log(users);
console.log(users.length);
registerForm.innerHTML = 'Thank you for joining!';
registerForm.style.fontSize = '1.5rem';
registerForm.style.fontFamily = 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
registerForm.style.textAlign = 'center';
registerForm.style.marginTop = '50%';
users[count] = user;
count = count + 1;
}

Answer 3

将<form>绑定到"提交";事件:

form.addEventListener("submit", (e) => {//...

,

• 如果你有.length，你真的不需要计数。
• FormData()有点像user对象(你的方式似乎容易得多)。
• 使用的语法来自HTMLFormElement接口。
• 不要将电话和邮编值转换为数字，除非你打算对它们进行排序。
• 更改.phonetype为tel

const form = document.forms.join;
const IO = form.elements;
const id = IO.username;
const name = IO.fullname;
const email = IO.email;
const cell = IO.phone;
const zip = IO.postcode;
const pass = IO.password;
let users = [];
let user = {};
form.addEventListener("submit", (e) => {
e.preventDefault();
user.id = id.value;
user.name = name.value;
user.email = email.value;
user.cell = cell.value;
user.zip = zip.value;
user.pass = pass.value;
users.push(user);
console.log(users);
console.log(users.length);
form.innerHTML = 'Thank you for joining!';
form.style.fontSize = '1.5rem';
form.style.fontFamily = 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
form.style.textAlign = 'center';
form.style.marginTop = '50%';
});

<form id="join">
<ul>
<li><input type="text" name="username" class="username" placeholder="Username" required></li>
<li><input type="text" name="fullname" class="fullname" placeholder="Full Name" required></li>
<li><input type="email" name="email" class="email" placeholder="Email Address" pattern="[e-mail]" required></li>
<li><input type="tel" name="phone" class="phone" placeholder="Phone Number" required></li>
<li><input type="text" name="postcode" class="postcode" placeholder="Post Code" required></li>
<li><input type="password" name="password" class="password" placeholder="Enter a password" required></li>
</ul>
<input type="submit">
</form>