使用jQuery Validation插件的Bootstrap

Question

使用jQuery Validation插件的Bootstrap我正在尝试使用jQuery Validation Plugin为我的表单添加验证，但我遇到的问题是，当我使用输入组时，插件会放置错误消息。$('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/

Answer 1

为了与Bootstrap 3完全兼容，我添加了对输入组，无线电和复选框的支持，这在其他解决方案中是缺失的。

检查了其他答案的建议，并为无线电内联的特殊标记添加了额外支持，为一组无线电或复选框提供了更好的错误放置，并添加了对自定义.novalidation类的支持，以防止对控件进行验证。希望这有助于并感谢您的建议。

包含验证插件后添加以下调用：

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }});

这适用于所有Bootstrap 3表单类。如果使用水平形式，则必须使用以下标记。这可确保帮助块文本遵循表单组的验证状态（“has-error”，...）。

<div class="form-group">
    <div class="col-lg-12">
        <div class="checkbox">
            <label id="LabelConfirm" for="CheckBoxConfirm">
                <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
                I have read all the information 
            </label>
        </div>
    </div></div>