如何在带有 Bootstrap 表单的模式中给出友好的错误消息？

Question

单击更新后如何在模态中给出错误消息？

在我的示例中，我在输入字段中提供了required的属性。 我想根据Form Validation Best Practices更改错误消息。

（此代码是 CRUD PHP 文件的一部分，用于更新我拥有的表中的数据）

 <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Edit Data</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form id="form-update" action="proses_edit.php" name="modal_popup" enctype="multipart/form-data" method="POST"> <div class="form-group" style="padding-bottom: 20px;"> <label for="Name">Name</label> <input type="hidden" name="modal_id" id="edit-id" class="form-control" value="<?php echo $r['modal_id']; ?>"/> <input type="text" name="modal_name" id="edit-name" class="form-control" value="<?php echo $r['modal_name']; ?>" required /> </div> <div class="form-group" style="padding-bottom: 20px;"> <label for="Description">Age</label> <input type="text" id="edit-description" class="form-control" value="<?php echo $r['description']; ?>" required /> </div> <div class="modal-footer"> <button class="btn btn-success" type="submit"> Update </button> <button type="reset" class="btn btn-danger" data-dismiss="modal" aria-hidden="true"> Cancel </button> </div> </form> </div> </div> </div>

Answer 1

以下是表单验证如何与 Bootstrap 一起使用，取自文档：

• HTML 表单验证通过 CSS 的两个伪类:invalid和:valid应用。 它适用于<input> 、 <select>和<textarea>元素。
• Bootstrap 将:invalid和:valid styles 限定为父.was-validated class，通常应用于<form> 。 否则，任何没有值的必填字段在页面加载时显示为无效。 这样，您可以选择何时激活它们（通常在尝试提交表单之后）。
• 作为后备，可以使用.is-invalid和.is-valid类代替伪类来进行服务器端验证。 它们不需要经过验证的父 class。

为了实现您想要做的一些事情，从这里的示例中获取，您可以使用自定义 styles 并为每个输入创建工具提示并根据验证结果显示响应。 您需要将novalidate属性添加到您的<form>中，以防止默认浏览器验证使其正常工作。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="needs-validation" novalidate> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="validationCustom01">First name</label> <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required> <div class="valid-feedback"> Looks good. </div> </div> <div class="col-md-4 mb-3"> <label for="validationCustom02">Last name</label> <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required> <div class="valid-feedback"> Looks good. </div> </div> <div class="col-md-4 mb-3"> <label for="validationCustomUsername">Username</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend">@</span> </div> <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required> <div class="invalid-feedback"> Please choose a username. </div> </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationCustom03">City</label> <input type="text" class="form-control" id="validationCustom03" placeholder="City" required> <div class="invalid-feedback"> Please provide a valid city. </div> </div> <div class="col-md-3 mb-3"> <label for="validationCustom04">State</label> <input type="text" class="form-control" id="validationCustom04" placeholder="State" required> <div class="invalid-feedback"> Please provide a valid state. </div> </div> <div class="col-md-3 mb-3"> <label for="validationCustom05">Zip</label> <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> <div class="invalid-feedback"> Please provide a valid zip; </div> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required> <label class="form-check-label" for="invalidCheck"> Agree to terms and conditions </label> <div class="invalid-feedback"> You must agree before submitting. </div> </div> </div> <button class="btn btn-primary" type="submit">Submit form</button> </form> <script> // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict', window.addEventListener('load'; function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'). // Loop over them and prevent submission var validation = Array.prototype,filter.call(forms, function(form) { form.addEventListener('submit'. function(event) { if (form;checkValidity() === false) { event.preventDefault(); event.stopPropagation(). } form;classList,add('was-validated'); }; false), }); }; false); })(); </script>

有关引导验证的更多信息： https://getbootstrap.com/docs/4.0/components/forms/#validation