如何使用 jquery 显示 bootstrap 4 验证反馈？

Question

我想要实现的是：使用 ajax 调用从服务器获取表单验证信息，并在.invalid-feedback显示错误/无效反馈， .invalid-feedback :invalid css 应用于输入字段。

<form id="register-form" novalidate>
  <div class="form-group">
     <label class="sr-only" for="first_name">first name</label>
     <input type="text" id="first_name" name="first_name" value="" class="form-control" >
     <div class="invalid-feedback"></div>
  </div>
....other inputs
</form>

我能够使用以下方法在相关的invalid-feedback设置错误消息：

$.ajax({
            url: actionUrl,
            method: "POST",
            dataType: "json",
            timeout: 5000,
            data: form.serialize(),
            success: function (response) {
                if(response.errors === ''){
                    pageRedirect("register/login");
                } else {
                    $.each(response.errors, function(field, error) {
                        form.find('[name="' + field + '"]').siblings('.invalid-feedback').text(error);
                    });
                    //feedback is set now how to show them??
                }
            },

Answer 1

正如此处Bootstrap 的 Forms 文档中所述：

服务器端

我们建议使用客户端验证，但如果您需要服务器端，您可以使用 .is-invalid 和 .is-valid 指示无效和有效的表单字段。 请注意，这些类也支持 .invalid-feedback。

简而言之，您需要添加 CSS 类is-invalid以形成验证错误的表单控件。 当你这样做时：

表单控件将被红色轮廓包围，以表明它存在验证错误
具有invalid-feedback CSS 类的同级 div 将呈现为红色文本

这是一个代码片段，通过“模拟”响应说明了这一点。 尝试单击验证按钮：

 var form = $("form").first(); $("#validate").click(function() { var mockResponse = { errors : { 'first_name': 'First name must not be blank', 'last_name': 'Last name must not be blank' } }; $.each(mockResponse.errors, function(fieldName, error) { let field = form.find('[name="' + fieldName + '"]'); field.addClass("is-invalid"); let immediateSibling = field.next(); if (immediateSibling.hasClass('invalid-feedback')) { immediateSibling.text(error); } else { field.after("<div class='invalid-feedback'>" + error + "</div>") } }); return false; });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body class="bg-light"> <div class="container"> <form id="register-form" novalidate> <div class="form-group"> <label class="sr-only" for="first_name">First Name</label> <input type="text" id="first_name" name="first_name" value="" placeholder="First Name" class="form-control" > </div> <div class="form-group"> <label class="sr-only" for="last_name">Last Name</label> <input type="text" id="last_name" name="last_name" value="" placeholder="Last Name" class="form-control" > </div> <div class="form-group"> <label class="sr-only" for="email">Email Name</label> <input type="text" id="email" name="email" value="" placeholder="Email" class="form-control" > </div> <button id="validate" class="btn btn-primary btn-lg btn-block" type="submit">Validate</button> </form> </div>

Answer 2

https://getbootstrap.com/docs/4.5/components/forms/#custom-styles

如您所见，此处显示的脚本根本不使用 AJAX。 客户端的表单验证完全在客户端完成。

如何使用 jquery 显示 bootstrap 4 验证反馈？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-08-23 13:55:21

解决方案2
0 2020-08-23 13:05:27

如何使用 jquery 显示 bootstrap 4 验证反馈？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-08-23 13:55:21

解决方案2 0 2020-08-23 13:05:27

解决方案1
1 已采纳 2020-08-23 13:55:21

解决方案2
0 2020-08-23 13:05:27