Question

我尝试使用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>

这里是循环表数据并添加CSS的函数：

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

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

Answer 1

根据我的评论：

$(".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.");
    }
});

Answer 2

试试这个：

$(".analyze").click(function () {
var req = $(".required");
req.each(function (i) {
    if ($(this).val() === "") {
        $(this).parent("td").addClass("redClass");
        req.error = true;
    }
});
if (req.error) {
    alert("Looks like some of the fields aren't filled out correctly.  They're highlighted in red."); }
});

.redClass {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <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>
</table>
<button type="submit" class="analyze">Analyze</button>

Answer 3

这是一个小提琴http://jsfiddle.net/cga65pLh/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;
}

});

});

这样做，在点击时，它会从任何具有“必需”类的元素中删除redClass，这样每次按下按钮时它都会重新开始。然后它将值x转换为true。这样我们就可以跟踪是否有警报消息。 a.e如果确实没有警报。

对于每个具有“必需”类的元素，我们检查值是否为“”。如果是，我们应用类“redClass”，它将当前框变为红色，我们检查x是否为真。如果x为真，我们会显示一个警告并将x转为false，这样就不会出现其他弹出窗口。

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

3 个答案: