Tweak form validation snippet. (#29359)

* remove load event
* use `forEach` and `querySelectorAll`
* simplify check

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 (file)
--- 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 (file)
--- 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 >}}