twitter-bootstrap – 使用jQuery Validation Plugin的Bootstrap

发布时间：2020-12-18 00:15:03 所属栏目：安全来源：网络整理

导读：我正在尝试使用jQuery Validation Plugin为我的表单添加验证，但是我遇到了一个问题，当我使用输入组时插件会放置错误消息。 $('form').validate({ rules: { firstname: { minlength: 3,maxlength: 15,required: true },lastname: { minlength: 3,required:

我正在尝试使用jQuery Validation Plugin为我的表单添加验证，但是我遇到了一个问题，当我使用输入组时插件会放置错误消息。

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,maxlength: 15,required: true
        },lastname: {
            minlength: 3,required: true
        }
    },highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

我的代码：http://jsfiddle.net/hTPY7/4/

解决方法

为了与twitter bootstrap 3完全兼容，我需要覆盖一些插件方法：

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },errorElement: 'span',errorClass: 'help-block',errorPlacement: function(error,element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

参见示例：http://jsfiddle.net/mapb_1990/hTPY7/7/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!