单选组，jQuery next方法无法正常工作

Question

我正在验证。 在验证功能中，我添加了事件侦听器，并在未提供该值以显示错误时将其聚焦。

除了无线电广播，其他所有设备都工作正常。

这是我的html（专家）

             <label>
                <span class="label">Select Gender</span>
                Male<input name="gender[]"  type="radio"/> 

                    Female<input name="gender[]"  type="radio"/>
                    <span class="error">Gender Required</span>
                </label>
                <label>
                <span class="label">Select a Gender</span> 
                Domestic <input value="domestic" name="trade[]" type="checkbox" /> 
                International <input name="trade[]" value="multination" type="checkbox" />
                <span class="error">Business Level Required</span>
            </label>

Js：

           case "RADIO" : 
           case "CHECKBOX" : //it works!
                if(actualValue === 'false'){
                    $(target).next('.error').css('display','block');
                } else {
                    $(target).next('.error').css('display','none');
                }
                break;

这是什么原因？ 有人帮我吗？

DEMO

Answer 1

最初的问题是将$input.prop('checked')视为字符串。 它实际上返回一个布尔值，因此您可以按原样使用它，如!$input.prop('checked') 。

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

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/68kv5/13/

您将看到我将初始事件处理简化为以下三个委托事件：

    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()命令 ：）

更新： http : //jsfiddle.net/TrueBlueAussie/68kv5/17/

这一步骤对代码进行了一些重构，以便仅将有问题的元素传递给验证。

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();