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

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')视为字符串。它实际上返回一个bool，因此您可以像!$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();