docs: fix forms validation

site/content/docs/5.0/forms/validation.md

@@ -4,6 +4,9 @@ title: Validation
 description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
 group: forms
 toc: true
+extra_js:
+  - src: "/docs/5.0/assets/js/validate-forms.js"
+    async: true
 ---
 
 {{< callout warning >}}
@@ -96,29 +99,12 @@ 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 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');
-
-  // 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);
-    });
-})();
-</script>
+{{< example lang="js" show_preview="false" >}}
+{{< js.inline >}}
+{{- readFile (printf "site/static/docs/%s/assets/js/validate-forms.js" .Site.Params.docs_version) -}}
+{{< /js.inline >}}
 {{< /example >}}
 
 ## Browser defaults

site/layouts/_default/docs.html

@@ -47,5 +47,9 @@ <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
 
     {{ partial "footer" . }}
     {{ partial "scripts" . }}
+
+    {{ range .Page.Params.extra_js -}}
+      <script{{ with .async }} async{{ end }} src="{{ .src }}"></script>
+    {{- end -}}
   </body>
 </html>

site/layouts/shortcodes/example.html

@@ -8,6 +8,7 @@
     show_markup: if the markup should be output in the HTML - default: `true`
 */ -}}
 
+{{- $lang := .Get "lang" | default "html" -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $input := .Inner -}}
@@ -21,5 +22,5 @@
 {{- if eq $show_markup true -}}
   {{- $content := replaceRE `<svg class="bd\-placeholder\-img(?:\-lg)?(?: *?bd\-placeholder\-img\-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
   {{- $content = replaceRE `(class=" *?")` "" $content -}}
-  {{- highlight (trim $content "\n") "html" "" -}}
+  {{- highlight (trim $content "\n") $lang "" -}}
 {{- end -}}

site/static/docs/5.0/assets/js/validate-forms.js

@@ -0,0 +1,20 @@
+// 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')
+
+  // 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)
+    })
+})()