From 6824d67beb423d51d27b9f297f97c75f6298c183 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sat, 2 May 2020 18:39:41 +0300
Subject: [PATCH] Fix forms validation snippets.

---
 site/assets/js/validate-forms.js          | 24 +++++++++++++++++++++++
 site/content/docs/5.0/forms/validation.md |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 site/assets/js/validate-forms.js

diff --git a/site/assets/js/validate-forms.js b/site/assets/js/validate-forms.js
new file mode 100644
index 0000000000..b79f63f2dc
--- /dev/null
+++ b/site/assets/js/validate-forms.js
@@ -0,0 +1,24 @@
+// Example starter JavaScript for disabling form submissions if there are invalid fields
+(function () {
+  'use strict'
+
+  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+  var forms = document.querySelectorAll('.needs-validation')
+
+  if (!forms) {
+    return
+  }
+
+  // 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)
+    })
+})()
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 2b8e1b7aa9..c505163624 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -96,8 +96,9 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
     <button class="btn btn-primary" type="submit">Submit form</button>
   </div>
 </form>
+{{< /example >}}
 
-<script>
+{{< example lang="js" show_preview="false" >}}
 // Example starter JavaScript for disabling form submissions if there are invalid fields
 (function () {
   'use strict';
@@ -118,7 +119,6 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
       }, false);
     });
 })();
-</script>
 {{< /example >}}
 
 ## Browser defaults
-- 
2.47.2