使用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({ &nbsp;&nbsp;&nbsp;&nbsp;errorElement:&nbsp;"span", &nbsp;&nbsp;&nbsp;&nbsp;errorClass:&nbsp;"help-block", &nbsp;&nbsp;&nbsp;&nbsp;highlight:&nbsp;function&nbsp;(element,&nbsp;errorClass,&nbsp;validClass)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Only&nbsp;validation&nbsp;controls &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!$(element).hasClass('novalidation'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(element).closest('.form-group').removeClass('has-success').addClass('has-error'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;unhighlight:&nbsp;function&nbsp;(element,&nbsp;errorClass,&nbsp;validClass)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Only&nbsp;validation&nbsp;controls &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!$(element).hasClass('novalidation'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;errorPlacement:&nbsp;function&nbsp;(error,&nbsp;element)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(element.parent('.input-group').length)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error.insertAfter(element.parent()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(element.prop('type')&nbsp;===&nbsp;'radio'&nbsp;&&&nbsp;element.parent('.radio-inline').length)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error.insertAfter(element.parent().parent()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(element.prop('type')&nbsp;===&nbsp;'checkbox'&nbsp;||&nbsp;element.prop('type')&nbsp;===&nbsp;'radio')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error.appendTo(element.parent().parent()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error.insertAfter(element); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}});这适用于所有Bootstrap 3表单类。如果使用水平形式，则必须使用以下标记。这可确保帮助块文本遵循表单组的验证状态（“has-error”，...）。<div&nbsp;class="form-group"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-lg-12"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="checkbox"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;id="LabelConfirm"&nbsp;for="CheckBoxConfirm"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="checkbox"&nbsp;name="CheckBoxConfirm"&nbsp;id="CheckBoxConfirm"&nbsp;required="required"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I&nbsp;have&nbsp;read&nbsp;all&nbsp;the&nbsp;information&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>