diff --git a/site/content/docs/4.3/examples/checkout/form-validation.js b/site/content/docs/4.3/examples/checkout/form-validation.js index 59291c8b393611d10256bcadb7473c4105871b5a..f8fd583de4b1529ca6dc8478f669a70ae29ebe25 100644 --- a/site/content/docs/4.3/examples/checkout/form-validation.js +++ b/site/content/docs/4.3/examples/checkout/form-validation.js @@ -2,14 +2,14 @@ (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') + // Fetch all the forms we want to apply custom Bootstrap validation styles to + var forms = document.querySelectorAll('.needs-validation') - // Loop over them and prevent submission - Array.prototype.filter.call(forms, function (form) { + // Loop over them and prevent submission + Array.prototype.slice.call(forms) + .forEach(function (form) { form.addEventListener('submit', function (event) { - if (form.checkValidity() === false) { + if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } @@ -17,5 +17,4 @@ form.classList.add('was-validated') }, false) }) - }, false) })() diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md index bedaeba13ae665859c37feb322d023ec486f4ceb..29b9aeac5d7a74caf5de5d2ed2132f245918610f 100644 --- a/site/content/docs/4.3/forms/validation.md +++ b/site/content/docs/4.3/forms/validation.md @@ -103,22 +103,24 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun <script> // Example starter JavaScript for disabling form submissions if there are invalid fields -(function() { +(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) { + + // Fetch all the forms we want to apply custom Bootstrap validation styles to + var forms = document.querySelectorAll('.needs-validation'); + + // Loop over them and prevent submission + Array.prototype.slice.call(forms) + .forEach(function (form) { + form.addEventListener('submit', function (event) { + if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } + form.classList.add('was-validated'); }, false); }); - }, false); })(); </script> {{< /example >}}