时间戳

首页 > 解决方案 > 如何使用 jquery 显示 bootstrap 4 验证反馈？

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

问题描述

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

<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??
                }
            },

标签： javascriptjquerybootstrap-4

解决方案

如 Bootstrap的Forms 文档中所述：

服务器端

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

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

  • 表单控件将被红色轮廓包围，表示它存在验证错误
  • 具有 CSS 类的兄弟 divinvalid-feedback将呈现为红色文本

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

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>

推荐阅读