选择了jquery验证引导向导?

时间:2014-02-06 17:58:56

标签: twitter-bootstrap jquery-validate wizard jquery-chosen

所以我有一个引导向导,只需一步选择一些选择框。我添加了ignore:':hidden:not(select)'以允许jquery validate验证所选。

这使得框验证但是......不在正确的步骤。它会在每一步验证所有选中的框!

var $validator = $("#register").validate({
    ignore: ':hidden:not(select)',
    rules: {
        country: {
            required: true
        }
    }
});
$('#registerwiz').bootstrapWizard({
    'onNext': function(tab, navigation, index) {
        var $total = navigation.find('li').length;
        var $current = index+1;
        var $percent = ($current/$total) * 100;
        var $valid = $("#register").valid();
        if(!$valid) {
            $validator.focusInvalid();
            return false;
        } else {
            $('#registerwiz').find('.progress-bar').css({width:$percent+'%'});
        }
    }
});

所以我想知道如何让它只验证特定步骤中选择的方框。

并且如果可能的话,使错误警告在上面选择的框下面。

1 个答案:

答案 0 :(得分:0)

添加errorPlacement

errorPlacement: function (error, element) {
            if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                var controls = element.closest('div[class*="col-"]');
                if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
            }
            else if (element.is('.select2')) {
                error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
            }
            else if (element.is('.chosen-select')) {
                error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
            }
            else error.insertAfter(element.parent());
        }

很好用