For 循环在验证表单时只运行一次

Question

我有一个表单，我正在使用 JavaScript 进行一些表单验证。

function validate() {
    let arr = [];
    arr[0] = form.name ;
    arr[1] = form.mobNumber ;
    arr[2] = form.email ;
    arr[3] = form.query ;
    for (let num = 0; num < arr.length; num++){
        if (arr[num].value == ""){
        arr[num].placeholder = "This field is mandatory";
        arr[num].style.backgroundColor = "rgba(0, 0, 255, 0.1)";
        arr[num].classList.add('redPlaceholder');
        return false;
        }
    }
}

.redPlaceholder::placeholder {
    color: red;
    font-style: italic;
    font-family: 'Roboto' sans-serif;
}

<form name="form" method="post" netlify id="form"  onsubmit="return validate()" >
<input type="text" name="name" placeholder="Name"><br>
<input type="email" name="email" placeholder="E-mail"><br>
<input type="number" name="mobNunber" placeholder="Contact Number"><br>
<textarea name="query" placeholder="Your Query" rows="5"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

在 js 部分，我有一个空数组，然后通过名称访问它们来添加表单的输入字段。 在 for 循环中，我正在检查每个输入字段是否已填充。如果没有，那么我有一些代码要执行。那个代码块运行得很好。

问题是，当我在所有字段为空的情况下单击提交按钮时，for 循环中的代码只运行一次 - 对于第一个输入字段。尽管我已经检查了几次语法，但我认为循环存在一些问题。

Answer 1

在 html 中，您为手机号码输入了 mobNunber 的名称，但 javascript 查找 mobNumber，所以我修复了这个问题。简单地检查 arr.length == num 是否在这些不完整的输入之一期间返回 false 不起作用，所以我制作了一个变量，如果其中一个输入未填写，则在 for 循环结束后返回 false 时打勾。我还添加了arr[num].style.backgroundColor = "transparent";，因此如果用户未能填写输入内容，即使在填写完输入内容后，背景也不会始终保持紫色。

function validate() {

    let err = false;
    let arr = [];
    arr[0] = form.name ;
    arr[1] = form.mobNumber ;
    arr[2] = form.email ;
    arr[3] = form.query ;
    for (let num = 0; num < arr.length; num++){
        if (arr[num].value == ""){
        arr[num].placeholder = "This field is mandatory";
        arr[num].style.backgroundColor = "rgba(0, 0, 255, 0.1)";
        arr[num].classList.add('redPlaceholder');
                err = true;

        }
        else{
         arr[num].style.backgroundColor = "transparent";
        }
    }
        if (err){
        return false;
        }
    console.log(arr[1] + "test")
}

.redPlaceholder::placeholder {
    color: red;
    font-style: italic;
    font-family: 'Roboto' sans-serif;
}

<form name="form" method="post" netlify id="form"  onsubmit="return validate()" >
<input type="text" name="name" placeholder="Name"><br>
<input type="email" name="email" placeholder="E-mail"><br>
<input type="number" name="mobNumber" placeholder="Contact Number"><br>
<textarea name="query" placeholder="Your Query" rows="5"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

编辑：可以在调用函数时简单地将event 添加到函数中，而不是创建变量。 onsubmit="return validate(event)" 并使用e 表示当函数实际运行function validate(e) 并且如果for 循环检测到其中一个值等于0，您可以使用函数e.preventDefault() 来阻止表单提交。此处示例：https://jsfiddle.net/nukeboy212/vskt8epj/2/。

Answer 2

我会使用 preventDefault 来阻止表单提交，让您运行所需的内容，然后在您真正准备好时告诉表单提交。

取自answer。

function validate(e) {
  e.preventDefault();

  // Form stuff here
}

并更新您的表单提交到：

<form name="form" method="post" netlify id="form" onsubmit="return validate(event)" >