在警报后突出显示空的选择框

Highlight empty select box after alert

本文关键字：选择 显示      更新时间：2023-09-26

我有一个使用input:text的网站，选择并选择多个元素，这些元素在单击按钮时生成文本输出。

搜索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

这个代码运行得很好。我添加了一行来删除任何添加的".突出显示"类，用于修复后未导致错误的选择

// 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;
        }

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

此外，在添加高亮显示类之前，您将返回false。您可能需要跟踪是否有任何select无效，并在完成所有验证后在最后返回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;
}
相关文章：