如何使用事件监听器提交按钮答案

【问题标题】：How to use event listener to submit button如何使用事件监听器提交按钮
【发布时间】：2021-03-13 07:51:43
【问题描述】：

我在使用这个事件监听器时遇到了一些问题。我正在尝试在提交按钮中添加一个事件侦听器，但它不起作用。我不知道我做错了什么！这是我的工作：

const form = document.getElementById("form");
form.addEventListener('submit', (e) =>{
let valid = true;
valid=valida();
if(!valid){
e.preventDefault();
}
});
function valida() {
var nome = document.getElementById("nome");
const nomeVal = nome.value;
var cognome = document.getElementById("cognome");
const cVal = cognome.value;
let valida = true; 
valida = nomeVal.length < 8 ? setError(nome, "devi inserire nome"): setSuccess(nome);
if (cVal.length < 8) {
 valida = setError(cognome, "devi inserire cognome");
}
return valida;
}
function setError(input, m) {
input.className = "error"
const ciao = input.nextElementSibling;
ciao.innerText = m;
return false;
}
function setSuccess(input) {
input.className = 'success';
const error = input.nextElementSibling;
error.innerText = '';
return true;
}

<form id="form" name="registrazione" action="index.html" >
Nome: <input id="nome" name="nome" type="text"> <small></small><br>
Cognome: <input id="cognome" name="cognome" type="text"> <small></small>
<br>
<button id="button" type="submit">Submit</button>
</form>

【问题讨论】：

标签： javascript html function methods addeventlistener

【解决方案1】：

您好，您尝试过使用 onclick 事件处理程序吗？

在提交按钮中放置 onlclick 事件

<form id="form" name="registrazione" action="index.html" >
Nome: <input id="nome" name="nome" type="text"> <small></small><br>
Cognome: <input id="cognome" name="cognome" type="text"> <small></small>
<br>
<button id="button" onclick="test()" type="submit">Submit</button>
</form>

然后在你的 js 上你可以使用下面的代码：

function test() {
let valid = true;
valid=valida();
if(!valid){
e.preventDefault();
}
};

【讨论】：

我知道，但我想使用监听器

【解决方案2】：

我将您的代码粘贴到 js fiddle 中。第二行末尾有一个 \u200b 隐藏字符。一旦我删除它，它看起来就可以工作了。 https://jsfiddle.net/mightypie/b1dmgtw2/9/

form.addEventListener('submit', (e) => {

【讨论】：