时间戳

首页 > 解决方案 > For 循环在验证表单时只运行一次

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

问题描述

我有一个表单，我正在使用 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 循环中的代码只运行一次 - 对于第一个输入字段。尽管我已经多次检查了语法，但我认为循环存在一些问题。

标签： javascripthtmlforms

解决方案

在 html 中，您为 mobilenumber 输入了名称，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/ 。

推荐阅读