我想要实现的是：使用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??
}
},
如Bootstrap的表单文档所示：
服务器端
我们建议使用客户端验证，但如果您需要服务器端，您可以使用.is invalid和.is valid来指示无效和有效的表单字段。请注意，这些类也支持.invalid反馈。
简而言之，您需要将CSS类is-invalid添加到存在验证错误的表单控件中。当你这样做时：
- 表单控件将被红色轮廓包围，表示它存在验证错误
- 具有
invalid-feedbackCSS类的同级div将呈现为红色文本
下面是一个代码片段，用"；mock"；回答尝试单击验证按钮：
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>https://getbootstrap.com/docs/4.5/components/forms/#custom-样式
正如您所看到的，这里显示的脚本根本没有使用AJAX。客户端的表单验证完全由客户端完成。