上一篇: 基于bootstrap的仿站练习01 下一篇:Laravel源码入门－启动引导过程（...

twitter-bootstrap – Bootstrap 3 with jQuery Validation Plugin

Bootstrap 发布时间：2022-04-18 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap 3 with jQuery Validation Plugin，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我试图添加验证到我的表单与jQuery验证插件，但我有一个问题，插件放错误消息，当我使用输入组。

$('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);
        }
    }
});