使用addEventListener的Web表单验证不起作用(使用原始javascript?)

Question

目前正在执行一项任务，我们被要求：

监听表单提交(提交事件(并检查每个字段是否已填充。如果填充了所有字段，则允许提交表单。否则，请取消提交并通知用户缺少的字段。

我不确定为什么我的代码不起作用。我使用addEventListener来监听表单的提交事件，然后创建了一个if语句列表，如果用户的输入为空("(，则会弹出一个警告按钮通知用户，并使用.prventdefault.阻止表单提交

这是我的javascript：

form.addEventListener("submit", function validate(evt){

if(evt.target[0]== ""){
alert("Please enter your name!");
evt.preventDefault;
}
if(evt.target[1]== ""){
alert("Please enter your email!");
evt.preventDefault;
}
if(evt.target[2]== ""){
alert("Please enter the message's subject!");
evt.preventDefault;
}
if(evt.target[3]== ""){
alert("Please enter a message!");
evt.preventDefault;
}

});

这是完整页面的链接：https://github.uconn.edu/pages/ssw19002/dmd-3475/Week-8/web-form/web-form.html

我正在尝试使用纯原始Javascript来实现这一点。没有JQuery或任何其他框架，因为这超出了本任务的范围。

Answer 1

您不是在调用preventDefault方法，而是只提供对该方法的引用。您缺少实际执行函数的括号。但这里还有另一个学习：您可以将函数存储在变量中，并在不使用括号的情况下传递它们。

evt.preventDefault; // wrong
evt.preventDefault(); // correct

编辑：实际上，正如lil devil所指出的，您还需要使用dom节点的.value来获得实际内容。

然而，执行任务的一种更深入的方法是实际引用检查中的输入，而不是针对子项，因为表单可能还包含其他dom节点。这样的东西：

form.addEventListener('submit', e => {
let invalid = [];
Array.from(form.querySelectorAll('input')).forEach(node => {
switch( node.getAttribute('type' ) {
case 'text':
// Check for Text values
if( !textValidationFunction( node ) ) {
invalid.push(node)
}
break;
case 'checkbox':
// Check for Checkbox values
break;
}
})
// Do the same for dropdowns etc.
// And then, at best, split everything into single methods

if( invalid.length > 0 ) {
e.preventDefault();
// Now you have all your invalid inputs in the invalid array to display them in whatever way you want.
// Give them a red border, get the name attribute, ...
}
// Of course there are lots of other ways to structure this :)
})

Answer 2

您需要引用evt.target[0].value而不仅仅是evt.target[0]