带有 jQ​​uery 验证插件的引导程序

Posted 2023-05-09

【中文标题】带有 jQ​​uery 验证插件的引导程序

【英文标题】：Bootstrap with jQuery Validation Plugin

【发布时间】：2018-06-20 16:01:24

【问题描述】：

我正在尝试使用 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/

【问题讨论】：

继承了一个带有 Bootstrap 3 的应用程序，笑说我发现了这个并在几年前我最后一次继承了一个带有 Bootstrap 3 的应用程序时将其添加到书签。

【参考方案1】：

为了与 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/

【讨论】：

效果很好，只是想提一下添加 $(element).removeClass(errorClass);取消突出显示和 $(element).addClass(errorClass);突出显示您是否希望成功不使用引导帮助块类

这很好用，除了一件事：针对 jQuery Validate 1.11.1 进行测试并在表单的验证器上调用 resetForm() 不会在无效元素上调用 unhighlight，因此有必要删除 @ 987654325@ 重置表单时手动上课。我所做的是调用以下函数，而不是直接调用验证器的resetForm()：function resetForm(form_id) $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm();

我不知道为什么代码在我的表单上不起作用:(

天哪，它就像一个魅力！非常感谢！！！您可能为我节省了一两个小时的研究时间。

如果你有像 Bootstrap 建议的单选按钮（单选按钮放在标签标签内），你会想要在 if 块中添加这样的东西：else if (element.prop('type') === 'radio') error.insertBefore(element.parent().parent());

【参考方案2】：

为了与 Bootstrap 3 完全兼容，我添加了对 input-group、radio 和 checkbox 的支持，这是其他解决方案所缺少的。

2017 年 10 月 20 日更新：检查了其他答案的建议，并添加了对 radio-inline 特殊标记的额外支持，更好地放置一组收音机的错误或复选框，并添加了对自定义 .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 表单类。如果您使用水平形式，则必须使用以下标记。这可确保 help-block 文本尊重 form-group 的验证状态（“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>

【讨论】：

我调整了errorClass: "help-block error-help-block"。我已经在使用 .help-block 来获取常规帮助信息，而这是用表单验证消息覆盖它。添加第二个类使其独一无二，因此现在它附加而不是覆盖我的“真实”帮助消息。

未调用高亮方法

您好 Vlado，您能否提供更多信息，为什么它不适合您？

对于一组单选按钮，这将在第一个选项下方添加错误消息，看起来很奇怪。您可能希望对此进行调整以区别对待单选按钮。

非常感谢@AndreasKrohn先生^_^

【参考方案3】：

我使用仅使用 Twitter Bootstrap 3 设计的表单。我为验证器设置默认函数并仅运行带有规则的验证方法。我使用来自 FontAweSome 的图标，但您可以使用 Glyphicons，如文档示例中所示。

jQuery.validator.setDefaults(
    highlight: function (element, errorClass, validClass) 
        if (element.type === "radio") 
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
         else 
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
        
    ,
    unhighlight: function (element, errorClass, validClass) 
        if (element.type === "radio") 
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
         else 
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
        
    
);

完成。运行验证功能后：

$("#default-register-user").validate(
    rules: 
        'login': 
            required: true,
            minlength: 5,
            maxlength: 20
        ,
        'email': 
            required: true,
            email: true,
            minlength: 5,
            maxlength: 100
        ,
        'password': 
            required: true,
            minlength: 6,
            maxlength: 25
        ,
        'confirmpassword': 
            required: true,
            minlength: 5,
            maxlength: 25,
            equalTo: "#password"
        
    
);

JSFiddle example

【讨论】：

如果有一个 JSFiddle 会很棒

你能把你用于截图的 html 贴出来吗？小提琴示例没有红色样式的错误消息，也没有图标。谢谢！

Christopher Francisco，我更新了 JSFiddle 示例并添加了很棒的字体 css。

您好，很好的解决方案！您将如何编辑它以便只有那些具有规则的字段显示成功或失败消息？对了，你的代码让所有字段都显示css，不管是否有规则

解决方案是在规则上方添加：'ignore: ".ignore, :hidden"'。然后只需将“忽略”类添加到您不想验证的所有字段

【参考方案4】：

添加到上面的 Miguel Borges 答案中，您可以通过在突出显示/取消突出显示代码块中添加以下行来向用户提供绿色成功反馈。

    highlight: function(element) 
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    ,
    unhighlight: function(element) 
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    

【参考方案5】：

这是您需要的解决方案，您可以使用errorPlacement 方法覆盖错误消息的放置位置

$('form').validate(
    rules: 
        firstname: 
            minlength: 3,
            maxlength: 15,
            required: true
        ,
        lastname: 
            minlength: 3,
            maxlength: 15,
            required: true
        
    ,
    errorPlacement: function(error, element) 
        error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group.
    , 
    highlight: function(element) 
        $(element).closest('.form-group').addClass('has-error');
    ,
    unhighlight: function(element) 
        $(element).closest('.form-group').removeClass('has-error');
    
);

它对我来说就像魔术一样有效。 干杯

【讨论】：

error.insertAfter('.form-group'); 将错误放入所有 .form-group 中。但它向我展示了这个想法。谢谢

【参考方案6】：

对于 bootstrap 4，这对我来说很好

    $.validator.setDefaults(
    highlight: function(element) 
        $(element).closest('.form-group').find(".form-control:first").addClass('is-invalid');
    ,
    unhighlight: function(element) 
        $(element).closest('.form-group').find(".form-control:first").removeClass('is-invalid');
        $(element).closest('.form-group').find(".form-control:first").addClass('is-valid');

    ,
    errorElement: 'span',
    errorClass: 'invalid-feedback',
    errorPlacement: function(error, element) 
        if(element.parent('.input-group').length) 
            error.insertAfter(element.parent());
         else 
            error.insertAfter(element);
        
    
);

希望它会有所帮助！

【讨论】：

开箱即用的效果非常好！我唯一添加的是validClass: 'valid-feedback'

谢谢，这对我有用的 Bootstrap 4 with validClass: 'valid-feedback'。

【参考方案7】：

这是我在向表单添加验证时使用的：

// Adding validation to form.
        $(form).validate(
            rules: 
                title: 
                    required: true,
                    minlength: 3,
                ,
                server: 
                    ipAddress: true,
                    required: true
                   
            ,
            highlight: function(element) 
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            ,
            success: function(element) 
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            ,
            errorClass: 'help-block'
        );

这对我在使用 jquery 验证库时的 Bootstrap 3 样式很有用。

【参考方案8】：

我把它用于收音机：

    if (element.prop("type") === "checkbox" || element.prop("type") === "radio") 
        error.appendTo(element.parent().parent());
    
    else if (element.parent(".input-group").length) 
        error.insertAfter(element.parent());
    
    else 
        error.insertAfter(element);
    

这样错误就会显示在最后一个单选选项下。

【讨论】：

非常简单的答案，谢谢 - 只是将额外的 type 子句插入到我现有的 errorPlacement 逻辑中

【参考方案9】：

我知道这个问题是针对 Bootstrap 3 的，但是由于一些与 Bootstrap 4 相关的问题被重定向到这个问题，所以这里是 sn-p Bootstrap 4-compatible：

$.validator.setDefaults(
    highlight: function(element) 
        $(element).closest('.form-group').addClass('has-danger');
    ,
    unhighlight: function(element) 
        $(element).closest('.form-group').removeClass('has-danger');
    ,
    errorElement: 'small',
    errorClass: 'form-control-feedback d-block',
    errorPlacement: function(error, element) 
        if(element.parent('.input-group').length) 
            error.insertAfter(element.parent());
         else if(element.prop('type') === 'checkbox') 
            error.appendTo(element.parent().parent().parent());
         else if(element.prop('type') === 'radio') 
            error.appendTo(element.parent().parent().parent());
         else 
            error.insertAfter(element);
        
    ,
);

几个区别是：

使用类has-danger代替has-error 更好的错误定位无线电和复选框

【讨论】：

Bootstrap 4 不再有 .has-* 类。 getbootstrap.com/docs/4.3/migration/#forms-1

【参考方案10】：

对于 bootstrap 4 beta，在 bootstrap 的 alpha 和 beta 版本（以及 bootstrap 3）之间发生了一些重大变化，尤其是。关于表单验证。

首先，要正确放置图标，您需要添加与 bootstrap 3 中的样式相同的样式，而不是 bootstrap 4 beta 中的样式...这就是我正在使用的

.fa.valid-feedback,
.fa.invalid-feedback 
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;


.fa.valid-feedback 
    margin-top: -28px;

随着测试版使用控件的“状态”而不是您发布的代码未反映的类，这些类也发生了变化，因此您的上述代码可能无法正常工作。无论如何，您需要在成功或突出显示/取消突出显示回调中将“已验证”类添加到表单中

$(element).closest('form').addClass('was-validated');

我还建议对表单控件帮助文本使用新元素和类

errorElement: 'small',
errorClass: 'form-text invalid-feedback',

【参考方案11】：

这组成了字段

 $("#form_questionario").validate(
                debug: false,
                errorElement: "span",
                errorClass: "help-block",
                highlight: function (element, errorClass, validClass) 
                    $(element).closest('.form-group').addClass('has-error');
                ,
                unhighlight: function (element, errorClass, validClass) 
                    $(element).closest('.form-group').removeClass('has-error');
                ,
                errorPlacement: function (error, element) 
                    if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') 
                        error.insertBefore(element.parent());
                     else 
                        error.insertAfter(element);
                    
                ,
                // Specify the validation rules
                rules: 
                        'campo1[]': 'required',
                        'campo2[]': 'required',
                        'campo3[]': 'required',
                        'campo4[]': 'required',
                        'campo5[]': 'required'
                        ,

                submitHandler: function (form) 
                    form.submit();
                
            );

【参考方案12】：

为此https://***.com/a/18754780/966181添加无线电内联修复

$.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 if (element.parent('.radio-inline').length) 
            error.insertAfter(element.parent().parent());
         else 
            error.insertAfter(element);
        
    
);

【讨论】：

很简单，很有帮助。谢谢。

【参考方案13】：

DARK_DIESEL 的回答对我很有帮助；这是任何想要使用 glyphicons 的人的代码：

jQuery.validator.setDefaults(
    highlight: function (element, errorClass, validClass) 
        if (element.type === "radio") 
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
         else 
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
        
    ,
    unhighlight: function (element, errorClass, validClass) 
        if (element.type === "radio") 
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
         else 
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
        
    
);

【参考方案14】：

尝试使用此示例代码。使用 Jquery 验证插件和其​​他方法。 这是我项目的工作代码。希望对你有帮助

//jquery validation booking page
	
	// Wait for the DOM to be ready
$(function() 
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='book']").validate(
	  //on key up validation
	  onkeyup: function(element) 
      $(element).valid(); 
    ,  
    // Specify validation rules
    rules: 
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      fname: 
        required: true,
        lettersonly: true
        ,
      lname:
        required: true,
        lettersonly: true
        ,
      email: 
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      ,
      password: 
        required: true,
        minlength: 5
      
    ,
    // Specify validation error messages
    messages: 
      fname: 
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      ,
      lname: 
      required:"Please enter your lastname",
      lettersonly:"Letters allowed only"
      ,
      email: "Please enter a valid email address"
    ,
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) 
      form.submit();
    
  );
);

.error 
  color: red;
  margin-left: 5px;
  font-size:15px;

<script src="design/bootstrap-3.3.7-dist/js/jquery.validate.js"></script>
<script src="design/bootstrap-3.3.7-dist/js/additional-methods.js"></script>

<form name="book" id="book" action="" method="post">

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="fname">First Name</label>
            <input type="text" name="fname" id="fname" class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-6">
            <label class="" for="lname">Last Name</label>
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="date">Date</label>
            <input type="text" id="date" class="form-control datepicker px-2" placeholder="Date of visit">
        </div>
        <div class="col-md-6">
            <label class="" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Email">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="treatment">Service You Want</label>
            <select name="treatment" id="treatment" class="form-control">
                <option value="">Hair Cut</option>
                <option value="">Hair Coloring</option>
                <option value="">Perms and Curls</option>
                <option value="">Hair Conditioning</option>
                <option value="">Manicure</option>
                <option value="">Pedicure</option>
                <option value="">Nails Extension</option>
                <option value="">Nail Design</option>
                <option value="">Waxing Eyebrows</option>
                <option value="">Waxing Hands/Legs</option>
                <option value="">Full Face Waxing</option>
                <option value="">Full Body/Body Parts Wax</option>
            </select>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="note">Notes</label>
            <textarea name="note" id="note" cols="30" rows="5" class="form-control" placeholder="Write your notes or questions here..."></textarea>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <center><input type="submit" value="Book Now" class="btn btn-primary btn-lg"></center>
        </div>
    </div>

</form>

【参考方案15】：

另一种选择是提前在表单组之外放置一个错误容器。验证器将在必要时使用它。

<div class="form-group">
  <label class="control-label" for="new-task-due-date">When is the task due?</label>
  <div class="input-group date datepicker">
    <input type="text" id="new-task-due-date" class="required form-control date" name="dueDate" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>                          
  </div>
  <label for="new-task-due-date" class="has-error control-label" style="display: none;"></label>
</div>