警报后突出显示空选择框

Question

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

Having searched SO, I found examples of validation code that will alert the user when a select field returns an empty value-

// 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”类突出显示 - 但这没有任何作用。我的 .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;
}