Javascript 无线电组，jQuery下一个方法工作不正常

我正在做验证。在验证函数中，我添加了事件监听器，并在未提供值时将焦点调出以显示错误

除了GROUP电台外，一切都很好

这是我的html（专家）

原因是什么？有人帮我吗

---

最初的问题是将

$input.prop（'checked'）

视为字符串。它实际上返回一个bool，因此您可以像

一样使用它$input.prop（'checked'）

我做了一些重构，因为我对整个事件连接系统有点困惑

JSFiddle： 您将看到我将初始事件处理缩减为以下三个委派事件：

    this.form.on('input focusout', "input[type=text], textarea", function (e) {
        var params = {
            val: $(this).val(),
            event: event,
            tagName: $(this).prop('type')
        };
        that.errorHandler(params);
    });

    this.form.on('change focusout', "select", function (e) {
        var params = {
            val: $(this).val(),
            event: event,
            tagName: $(this).prop('type')
        };
        that.errorHandler(params);
    });

    this.form.on('change focusout', "input[type=checkbox], input[type=radio]", function (e) {
        var params = {
            val: $(this).prop('checked'),
            event: event, 
            tagName: $(this).prop('type')
        };
        that.errorHandler(params);
    });

显然，请取出我添加的任何

console.log（）

命令：）

更新： 这一步对代码进行了一点重构，以便只将有问题的元素传递给验证

var Validator = function (form) {

    this.form = form;
    this.elements = this.form.find(':input:not(button, input[type=submit])');

    this.validate = function () {

        var that = this;
        this.form.on('input focusout', "input[type=text], textarea", function (e) {
            console.log("that.inputHandler(e)");
            that.errorHandler($(this));
        });

        this.form.on('change focusout', "select", function (e) {
            console.log("that.selectHandler(e)");
            that.errorHandler($(this));
        });

        this.form.on('change focusout', "input[type=checkbox], input[type=radio]", function (e) {
            console.log("that.changeHandler(e)");
            that.errorHandler($(this));
        });

        this.form.on('submit', function (e) {
            // todo - add form validation here  
            var allValid = true;
            that.form.find(':input:not(button, input[type=submit])').each(function () {
                if (!that.errorHandler($(this))) {
                    console.log("Invalid");
                    allValid = false;
                }
            });
            if (!allValid) {
                e.preventDefault();
            }
        });
    }

    var that = this;
    this.errorHandler = function ($input) {
        var tagName = $input.prop('type').toUpperCase();
        console.log("errorHandler: tagname = " + tagName);
        switch (tagName) {
            case 'TEXT':
                if (!$input.val().trim()) {
                    $($input).next('.error').css('display', 'block');
                    return false;
                } else {
                    $($input).next('.error').css('display', 'none');
                    return true;
                }
                break;
            case "SELECT-ONE":
                if ($input.val() === 'Select') {
                    $($input).next('.error').css('display', 'block');
                    return false;
                } else {
                    $($input).next('.error').css('display', 'none');
                    return true;
                }
                break;
            case "RADIO":
            case "CHECKBOX":
                if (!$input.prop('checked')) {
                    $($input).next('.error').css('display', 'block');
                    return false;
                } else {
                    $($input).next('.error').css('display', 'none');
                    return true;
                }
                break;
        }
    }
}

var initiateValidate = function () {
    var form = $('form');
    form.find('*').off();
    var validator = new Validator(form);
    validator.validate();
}

initiateValidate();

---

建议：您正在扫描DOM并连接各种事件处理程序。改为使用3个委派事件处理程序。更简洁、更简单。@TrueBlueAussie“改为使用3个委托事件处理程序。更简洁、更简单。”-您的意思是只使用

输入焦点out change

-聚集？同意。它添加了不同的监听器，每一组不同的元素和事件对应一个监听器。目前我正在为您准备一个示例。@3gwebtrain:您可以尝试使用

.sides（'.error'）

而不是

.next（'.error'）

。这应该很好。@TrueBlueAussie-你能告诉我一个提交的方法来触发所有这些错误吗？很好。但当我选择女性时，只有验证错误才会消失。另一方面，错误仍然存在。同样的方法也适用于复选框。。。（我有权选择任何一项权利？）我没有说它会完美，只是更好：）你能一步一步地解释一下新问题是什么吗，因为我不明白你所说的“当我只选择女性”是什么意思。谢谢

    this.form.on('input focusout', "input[type=text], textarea", function (e) {
        var params = {
            val: $(this).val(),
            event: event,
            tagName: $(this).prop('type')
        };
        that.errorHandler(params);
    });

    this.form.on('change focusout', "select", function (e) {
        var params = {
            val: $(this).val(),
            event: event,
            tagName: $(this).prop('type')
        };
        that.errorHandler(params);
    });

    this.form.on('change focusout', "input[type=checkbox], input[type=radio]", function (e) {
        var params = {
            val: $(this).prop('checked'),
            event: event, 
            tagName: $(this).prop('type')
        };
        that.errorHandler(params);
    });

var Validator = function (form) {

    this.form = form;
    this.elements = this.form.find(':input:not(button, input[type=submit])');

    this.validate = function () {

        var that = this;
        this.form.on('input focusout', "input[type=text], textarea", function (e) {
            console.log("that.inputHandler(e)");
            that.errorHandler($(this));
        });

        this.form.on('change focusout', "select", function (e) {
            console.log("that.selectHandler(e)");
            that.errorHandler($(this));
        });

        this.form.on('change focusout', "input[type=checkbox], input[type=radio]", function (e) {
            console.log("that.changeHandler(e)");
            that.errorHandler($(this));
        });

        this.form.on('submit', function (e) {
            // todo - add form validation here  
            var allValid = true;
            that.form.find(':input:not(button, input[type=submit])').each(function () {
                if (!that.errorHandler($(this))) {
                    console.log("Invalid");
                    allValid = false;
                }
            });
            if (!allValid) {
                e.preventDefault();
            }
        });
    }

    var that = this;
    this.errorHandler = function ($input) {
        var tagName = $input.prop('type').toUpperCase();
        console.log("errorHandler: tagname = " + tagName);
        switch (tagName) {
            case 'TEXT':
                if (!$input.val().trim()) {
                    $($input).next('.error').css('display', 'block');
                    return false;
                } else {
                    $($input).next('.error').css('display', 'none');
                    return true;
                }
                break;
            case "SELECT-ONE":
                if ($input.val() === 'Select') {
                    $($input).next('.error').css('display', 'block');
                    return false;
                } else {
                    $($input).next('.error').css('display', 'none');
                    return true;
                }
                break;
            case "RADIO":
            case "CHECKBOX":
                if (!$input.prop('checked')) {
                    $($input).next('.error').css('display', 'block');
                    return false;
                } else {
                    $($input).next('.error').css('display', 'none');
                    return true;
                }
                break;
        }
    }
}

var initiateValidate = function () {
    var form = $('form');
    form.find('*').off();
    var validator = new Validator(form);
    validator.validate();
}

initiateValidate();