必需属性不适用于 addEventListener？

Question

我的目标是将数据从表单传递到另一个元素。 我的代码在传递数据时有效，但是当表单为空并且用户尝试按下按钮时，即使我将属性放入每个表单输入， required的属性也不起作用。 我想防止用户提交空数据。

这是一个示例代码

 const passBtn = document.querySelector("#btnSubmit"); const inputEmail = document.querySelector("#inputEmail"); const recieveText = document.querySelector("#recieveText"); const getEmail = document.querySelector("#getEmail"); passBtn.addEventListener("click", function(e) { e.preventDefault(); getEmail.textContent = inputEmail.value; })

 <form legend="Form"> <fieldset> <legend> MyForm </legend> <input id="inputEmail" type="email" placeholder="Email" required /> <button id="btnSubmit" type="submit"> Pass Text </button> </fieldset> </form> <div id="wrapper"> <p> Recieved Text Here </p> <div class="content-wrapper"> <span id="getEmail"> </span> </div> </div>

Answer 1

要触发表单验证，您需要收听表单提交事件，为此您可以将代码更改为：

const form = document.querySelector("#form");
const inputEmail = document.querySelector("#inputEmail");
const recieveText = document.querySelector("#recieveText");
const getEmail = document.querySelector("#getEmail");



form.addEventListener("submit",function(e){
e.preventDefault();
getEmail.textContent = inputEmail.value;

/* recieveText.value = inputEmail.value; */

})

而且你还需要有一个元素的名称属性：然后更新：

<input id="inputEmail" type="email" placeholder="Email" required />

至

<input id="inputEmail" type="email" name="inputEmail" placeholder="Email" required />

https://jsfiddle.net/ko5py9cw/