带验证的jQuery循环

时间:2014-08-13 18:10:32

标签: javascript jquery

我有一个jQuery循环,它正在查看页面上的单选按钮,并确保它们已被检查。

这个功能正常,但有一个小故障,我知道为什么;只是不确定如何解决它。

// Validate the proficiencies
var names = {};
$('.radio').filter(':radio').each(function(){
    var name = $(this).attr('name');
    if( undefined === names[name] ){
        names[name] = false;
    }
    if( $(this).is(':checked') ){
        names[name] = true;
    }
});

$.each(names, function(name, val){
    if( !val ){
        theTab = 'proficienciesTab';
        $('.nav-tabs a[href="#' + theTab + '"]').tab('show');
        $('[name="'+name+'"]').closest('tr').addClass('danger');
        $('[name=error]').empty().append('<div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i>&nbsp;&nbsp;Please complete all proficiencies.</div>');
        hasError = true;
    }else{
        $('[name="'+name+'"]').closest('tr').removeClass('danger');
        hasError = false;
    }
});

if(!hasError){
    //process form
}

问题出在$.each循环中。如果有10个单选按钮并且所有单选按钮都未取消选中,则它会正常工作,因为它们都返回false。

但是,如果我只检查最后一个单选按钮,它将为所有这些按钮返回false,然后在最后一个时返回true,这样最终的hasError值将为true,从而执行下一段代码和处理表格。

如果我只是return false在这里if( !val ){ }它不会将类添加到缺少的类中,它只会将它添加到它找到的第一个错误。

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

在循环开始之前设置hasError = false。 如果发生错误,则仅设置hasError = true

最后一个好的永远不会覆盖假值。

hasError = false;
$.each(names, function(name, val){
        if( !val ){
            theTab = 'proficienciesTab';
            $('.nav-tabs a[href="#' + theTab + '"]').tab('show');
            $('[name="'+name+'"]').closest('tr').addClass('danger');
            $('[name=error]').empty().append('<div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i>&nbsp;&nbsp;Please complete all proficiencies.</div>');
            hasError = true;
        }else{
            $('[name="'+name+'"]').closest('tr').removeClass('danger');
        }
    });