Question

我有一个使用输入的网站：文本，选择并选择多个元素，在按钮点击时生成文本输出。

搜索了SO后，我找到了验证代码的示例，当选择字段返回空值时会提醒用户 -

// alert if a select box selection is not made
    var selectEls = document.querySelectorAll('select'),
        numSelects = selectEls.length;

    for(var x=0;x<numSelects;x++) {
        if (selectEls[x].value === '') {
            alert('One or more required fields does not have a choice selected... please check your form');
            return false;
            $(this).addClass("highlight");

        }

最后，我尝试在警报解除后添加一个条件，以便通过添加“突出显示”类来突出显示有问题的选择框 - 但这不会做任何事情。我的.highlight css是{border: 1px red solid;}

这里有什么帮助吗？

更新答案 - 谢谢@Adam Rackis

此代码完美无缺。我添加了一行来删除任何添加的'.highlight'类，用于修复后不会导致错误的选项

// alert if a select box selection is not made
    var selectEls = document.querySelectorAll('select'),
    numSelects = selectEls.length;
    $('select').removeClass("highlight");//added this to clear formatting when fixed after alert
    var anyInvalid = false;
    for(var x=0;x<numSelects;x++) {
        if (selectEls[x].value === '') {
            $(selectEls[x]).addClass("highlight");
            anyInvalid = true;
        }}
        if (anyInvalid) {
            alert('One or more required fields does not have a choice selected... please check your form');
            return false;
        }

Answer 1

你很亲密。在您的循环中，this不会引用您正在检查的每个选择。

此外，在添加高亮类之前，您将返回false。你可能想要跟踪任何选择是否无效，并在完成所有验证后在结束时返回false。

最后，考虑将警报移到最底层，这样您的用户就不会看到多个警报。

var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
    if (selectEls[x].value === '') {
        $(selectEls[x]).addClass("highlight");
        anyInvalid = true;
    }
}
if (anyInvalid) {
    alert('One or more required fields does not have a choice selected... please check your form');
    return false;
}

此外，由于您已经在使用jQuery，为什么不再利用它的功能：

$('select').each(function(i, sel){
    if (sel.value === '') {
        $(el).addClass("highlight");
        anyInvalid = true;
    }
});
if (anyInvalid) {
    alert('One or more required fields does not have a choice selected... please check your form');
    return false;
}

警报后突出显示空选择框

1 个答案: