Question

我有一点复杂的形式（包括输入，textareas，自定义选择等）。我想执行验证（只是为了检查所有字段是否为空）。没什么。

但我发现很难确认是否选择了单选按钮。我正在使用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/ 重现问题：

点击文字字段（提醒会告诉您表单无效） - 确定
关闭提醒并输入一个字母（否则您会被警报所困扰）。警报将再次弹出，告诉您表单仍然无效。 - 确定
现在点击其中一个单选按钮。警报仍会告诉您表单无效。 - 不行
如果您单击文本字段或其中一个单选按钮，则警报还有其他内容可以说：表单有效！ - 不行

我相信我误用了我绑定到我要解雇验证的元素的事件。

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..else更好）;
将错误对象替换为错误数组，其中push()错误;
当取消选择一个无线电组时，整个组都是无效的，而不是嵌套的任何一个单选按钮，所以检查应该基于整个组（参见selected标志的使用）;
对于单选按钮，active类切换到label而不是input;
最后，您已经注意到的最重要的功能：

Bootstrap本身使用事件和JS来切换active类，所以如果你立即检查它label永远不会有active类 - 为了解决这个问题，我插入了一个setTimeout()将在10毫秒后激活验证（这仍然是人类的立即），以便Bootstrap有足够的时间在我们进入并验证之前之前通过表单进行更新。

我在一个小提琴里仔细检查过，所以我非常有信心它运作良好，并开辟了你可能想象的许多可能性。

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

1 个答案: