javascript - 验证 mouseup/keyup 上的 Bootstrap 单选按钮

Question

我的表单有点复杂(包括输入、文本区域、自定义选择等)。我想执行验证(只是为了检查所有字段是否为空)。仅此而已。

但我发现很难验证单选按钮是否被选中。我正在使用 Twitter Bootstrap，我已经通过他们的 javascript 和 css (btn-group) 设置了单选按钮的样式。

我希望每当用户键入或单击某些内容时运行脚本来检查该字段是否为空。

我将在下面发布一个重现我的问题的 jsFiddle 链接。我使用的 javascript 有点不同，因为我只想对当前选项卡中的输入执行检查。

$('body').on('keyup mouseup ', 'li, label, input, textarea, select', function (e) {
    var tabId = $(this).closest('.tab-pane').attr('id');
    var inputs = $('#' + tabId + ' :input');
    var errors = {};
    inputs.each(function (i, element) {
        if ($(element).attr('name') !== undefined) {
            if ($(element).attr('type') !== 'radio') {
                if ($.trim($(element).val()) === '') {
                    errors[i] = $(element).attr('name');
                }
            } else {
                if ($('.active', $("input[name='" + $(element).attr('name') + "']").closest('.btn-group')).length <= 0) {
                    errors[i] = $(element).attr('name');
                }
            }
        }
    });
    console.log(errors);
    if (!$.isEmptyObject(errors)) {
        $('a[href="#' + tabId + '"]')
            .html("<i class='red ace-icon fa fa-times bigger-120'></i> " + $('a[href="#' + tabId + '"]').text());
    } else {
        $('a[href="#' + tabId + '"]')
            .html("<i class='green ace-icon fa fa-check bigger-120'></i> " + $('a[href="#' + tabId + '"]').text());
    }
});

http://jsfiddle.net/gzwyddrc/ 要重现问题:

1. 单击文本字段(警告会告诉您表单无效)- OK

2. 关闭警报并输入一个字母(否则您会被警报打扰)。警报将再次弹出，告诉您表格仍然无效。 - 好的

3. 现在单击其中一个单选按钮。警报仍会告诉您表单无效。 - 不行

4. 如果您单击文本字段或其中一个单选按钮，则警报会显示其他内容:表格有效! - 不行

我相信我滥用了我绑定(bind)到要触发该验证的元素的事件。

Answer 1

好的，我已经调查过了，但是我必须做出很多改变。

这是代码:

$("form").on("keyup mouseup", function (ev) {
    var selected, errors = [];

    setTimeout(function () {
        $("input,select").each(function (i, v) {
            var e;

            e = $(v);
            if (e.attr("name") === undefined) return;

            switch (e.attr("type"))
            {
                case "radio":
                    selected = false;
                    e.closest(".btn-group").find("input[type=radio]").each(function (i, v) {
                        if ($(v).closest("label").hasClass("active"))
                        {
                            selected = true;
                        }
                    });

                    if (!selected) {
                        errors.push(e.attr("id"));
                    }
                    break;
                default:
                    if ($.trim(e.val()) === "")
                    {
                        errors.push(e.attr("name")); // should be id?
                    }
                    break;
            }
        });

        if (errors.length > 0) {
            alert("ERRORS: " + errors);
        }
    }, 10);
});

我所做的修改是:

• 事件处理程序附加到form，这对于多表单页面尤其方便(想象一个单独的form在顶部用于登录)；
• 选择器还将 select(下拉列表)视为可能的输入字段；
• 对名称/顺序进行细微更改，使其更具可读性；
• switch 替换了 if，因为您将在以后遇到更多输入类型(switch 比 if..否则);
• 将错误对象替换为一个错误数组，在该数组上 push() 错误；
• 当单选组未选中时，整个组无效，不是嵌套的任何一个单选按钮，因此检查应基于组作为一个整体(参见 selected 的使用旗帜)；
• 对于单选按钮，active 类在 label 上切换，而不是在 input 上切换；
• 最后，您已经注意到的最重要的功能:

Bootstrap itself uses events and JS to toggle the active class, so if you check it right away the label will never have the active class -- to counter this, I inserted a setTimeout() that will fire validation 10 ms later (which still is instantly for humans) so that Bootstrap has all the time to make an update pass over the form before we go in and validate.

我在 fiddle 中彻底检查了它，所以我非常有信心它运作良好，并开启了许多您可能已经想到的可能性。