引導程序自定義驗證未在提交表單時顯示特定字段
[英]bootstrap custom validation is not showing up specific field on submission of the form
問題描述
我想知道如何使引導程序自定義驗證也顯示未填寫表單的特定字段。
您可以觀察正常的表單顯示或轉到提交表單時未填寫的特定字段
引導程序自定義驗證不執行此操作。
這是沒有引導程序自定義驗證的代碼
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> </head> <form> <div class="form-row"> <div class="col-md-4 mb-3"> <label for="validationDefault01">First name</label> <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required> </div> <div class="col-md-4 mb-3"> <label for="validationDefault02">Last name</label> <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required> </div> <div class="col-md-4 mb-3"> <label for="validationDefaultUsername">Username</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroupPrepend2">@</span> </div> <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required> </div> </div> </div> <div class="form-row"> <div class="col-md-6 mb-3"> <label for="validationDefault03">City</label> <input type="text" class="form-control" id="validationDefault03" placeholder="City" required> </div> <div class="col-md-3 mb-3"> <label for="validationDefault04">State</label> <input type="text" class="form-control" id="validationDefault04" placeholder="State" required> </div> <div class="col-md-3 mb-3"> <label for="validationDefault05">Zip</label> <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required> <label class="form-check-label" for="invalidCheck2"> Agree to terms and conditions </label> </div> </div> <button class="btn btn-primary" type="submit">Submit form</button> </form>
這是引導驗證
// 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); })();
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> </head> <body> <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> </body> </html>
2 個解決方案
解決方案1
0 2018-05-23 12:02:26
如果您刪除novalidate=""從<form class="needs-validation was-validated" novalidate="">你會得到相同的結果，而不引導驗證。
novalidate阻止瀏覽器驗證表單，因此您可以應用Bootstrap的自定義行為。
如果您想在驗證后向id添加滾動，我想您必須自己做，或者檢查您所使用的庫中是否有這樣的配置。
解決方案2
0 已采納 2018-06-14 07:34:30
我已經通過使用一些JavaScript代碼更新了代碼。
它正在工作。 :)
// 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(); var invalidOptions = document.querySelectorAll( ".form-control:invalid"); invalidOptions.forEach(function(element) { element.parentNode.childNodes.forEach(function(node) { if (node.className == 'valid-feedback') { node.className = 'invalid-feedback'; node.innerText = 'Please choose a Gender'; } }); }); $('html, body').animate({ scrollTop: $(invalidOptions[0]).offset().top }, 2000); } form.classList.add('was-validated'); }, false); }); }, false); })();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> </head> <body> <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> </body> </html>
Bootstrap V5 表單驗證和 Sweetalert2：成功提交后顯示成功消息
[英]Bootstrap V5 Form Validation & Sweetalert2 : Showing success message after successful submission
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.