Skip to main content
 首页 » 编程设计

twitter-bootstrap之带有 jQuery 验证插件的 Bootstrap

2024年02月24日25sharpest

我正在尝试使用 jQuery 验证插件向表单添加验证,但遇到问题,当我使用输入组时,插件会显示错误消息。

$('form').validate({ 
    rules: { 
        firstname: { 
            minlength: 3, 
            maxlength: 15, 
            required: true 
        }, 
        lastname: { 
            minlength: 3, 
            maxlength: 15, 
            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/