Javascript 使用.each（）方法验证jquery中的表单字段

我试图使用jQuery中的.each（）方法构建一个函数，该方法扫描空输入字段，以红色突出显示它们，然后提供一条警告消息，让用户知道需要更改什么

以下是我的html示例：

<tr>
    <td><input type="number" class="amount required" name="amount" ></td>
    <td><input type="number" class="carrier required" name="carrier" ></td>
    <td><input type="number" class="kilo required" name="kilo" ></td>
</tr>

<button type="submit" class="analyze">Analyze</button>

问题是，代码逐个遍历数组，并为每个空单元格创建一条警报消息。理想情况下，它会一次将.redClass添加到空字段中，如果有空字段，则只在末尾显示一条警报消息。

根据我的评论：

$(".analyze").click(function() {
    var counter = 0;
    $(".required").each(function() {
        if ($(this).val() === "") {
            $(this).parents("td").addClass("redClass");
            counter++;
        }
    });
    if(counter > 0){
        alert("Looks like some of the fields aren't filled out correctly. They're highlighted in red.");
    }
});

根据我的评论：

$(".analyze").click(function() {
    var counter = 0;
    $(".required").each(function() {
        if ($(this).val() === "") {
            $(this).parents("td").addClass("redClass");
            counter++;
        }
    });
    if(counter > 0){
        alert("Looks like some of the fields aren't filled out correctly. They're highlighted in red.");
    }
});

试试这个：

$（“.analyze”）。单击（函数（）{
风险值要求=$（“.required”）；
每项要求（功能（i）{
if（$（this）.val（）=“”）{
$（此）.parent（“td”）.addClass（“redClass”）；
req.error=true；
}
});
如果（请求错误）{
警报（“看起来有些字段填写不正确。它们以红色突出显示。”；}
});
.redClass{
背景：红色；
}

分析
尝试以下方法：


$（“.analyze”）。单击（函数（）{
风险值要求=$（“.required”）；
每项要求（功能（i）{
if（$（this）.val（）=“”）{
$（此）.parent（“td”）.addClass（“redClass”）；
req.error=true；
}
});
如果（请求错误）{
警报（“看起来有些字段填写不正确。它们以红色突出显示。”；}
});
.redClass{
背景：红色；
}

分析
这是一把小提琴

这样做的目的是，单击时，它会从任何类为“required”的元素中删除redClass，这样每次按下按钮时它都会重新启动。然后将值x变为true。这样我们就可以跟踪是否有警报消息。a、 e如果这是真的，就没有警报

对于类为“required”的每个元素，我们检查值是否为“”。如果是，我们应用类“redClass”，它将当前框变为红色，并检查x是否为真。如果x为真，我们将显示警报并将x变为假，以便不会出现其他弹出窗口
 这是一把小提琴

这样做的目的是，单击时，它会从任何类为“required”的元素中删除redClass，这样每次按下按钮时它都会重新启动。然后将值x变为true。这样我们就可以跟踪是否有警报消息。a、 e如果这是真的，就没有警报

对于类为“required”的每个元素，我们检查值是否为“”。如果是，我们应用类“redClass”，它将当前框变为红色，并检查x是否为真。如果x为真，我们将显示警报并将x变为假，以便不会出现其他弹出窗口
 您可以添加一个计数器变量，该变量在字段验证失败时每增加一个。最后，如果变量大于零，则显示警报。@jackel414这也是我最初的想法，但我遇到了相同的问题。我创建了一个变量数组input_fields=[]，如果数组为空，则将“.required”选择器推入数组，然后如果input_fields.length>1，则显示警报，但我得到了相同的结果，不确定原因。请编辑您的问题以添加该尝试。这可能有助于解决问题。我没有在这里包含该代码，因为它产生的结果与上面的代码相同，而且因为这更简单，所以我认为使用更稀疏的代码解决问题是一个好主意。您可以添加一个计数器变量，该变量在字段验证失败时每增加一个。最后，如果变量大于零，则显示警报。@jackel414这也是我最初的想法，但我遇到了相同的问题。我创建了一个变量数组input_fields=[]，如果数组为空，则将“.required”选择器推入数组，然后如果input_fields.length>1，则显示警报，但我得到了相同的结果，不确定原因。请编辑您的问题以添加该尝试。这可能有助于解决问题。我没有在这里包含该代码，因为它产生的结果与上面的代码相同，而且因为这更简单，所以我认为使用更稀疏的代码来解决问题是个好主意。
$(".analyze").click(function() { 
//on click of element with class "analyze"

$(".required").removeClass("redClass"); //remove redClass from all elements
//remove redClass from all elements with class required

x=true;
//turn x to true so that we know a pop up hasn't occurred yet

$(".required").each(function() {
// loop through each element with the class required

if ($(this).val() === "") {
// if the value is empty

    $(this).addClass("redClass");
    //add redClass to the element, turning the background of the element red.

    (x) ? 
 //check if x is true (this is a ternary statement)

 // if x is true do the following:
(alert("Looks like some of the fields aren't filled out correctly. They're highlighted in red."), 
x=false) 
:
// if x is false simply return false and don't do anything 
false;
}

});

});