From 3ea39841c8049525e31e9f4d6300f0c60cdb42de Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Tue, 24 Jan 2023 13:33:51 +0100 Subject: Adding upstream version 5.2.3+dfsg. Signed-off-by: Daniel Baumann --- .../docs/5.2/examples/checkout/form-validation.css | 3 + .../docs/5.2/examples/checkout/form-validation.js | 19 ++ site/content/docs/5.2/examples/checkout/index.html | 232 +++++++++++++++++++++ 3 files changed, 254 insertions(+) create mode 100644 site/content/docs/5.2/examples/checkout/form-validation.css create mode 100644 site/content/docs/5.2/examples/checkout/form-validation.js create mode 100644 site/content/docs/5.2/examples/checkout/index.html (limited to 'site/content/docs/5.2/examples/checkout') diff --git a/site/content/docs/5.2/examples/checkout/form-validation.css b/site/content/docs/5.2/examples/checkout/form-validation.css new file mode 100644 index 0000000..e5ea31c --- /dev/null +++ b/site/content/docs/5.2/examples/checkout/form-validation.css @@ -0,0 +1,3 @@ +.container { + max-width: 960px; +} diff --git a/site/content/docs/5.2/examples/checkout/form-validation.js b/site/content/docs/5.2/examples/checkout/form-validation.js new file mode 100644 index 0000000..30ea0aa --- /dev/null +++ b/site/content/docs/5.2/examples/checkout/form-validation.js @@ -0,0 +1,19 @@ +// Example starter JavaScript for disabling form submissions if there are invalid fields +(() => { + 'use strict' + + // Fetch all the forms we want to apply custom Bootstrap validation styles to + const forms = document.querySelectorAll('.needs-validation') + + // Loop over them and prevent submission + Array.from(forms).forEach(form => { + form.addEventListener('submit', event => { + if (!form.checkValidity()) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }) +})() diff --git a/site/content/docs/5.2/examples/checkout/index.html b/site/content/docs/5.2/examples/checkout/index.html new file mode 100644 index 0000000..4809dc4 --- /dev/null +++ b/site/content/docs/5.2/examples/checkout/index.html @@ -0,0 +1,232 @@ +--- +layout: examples +title: Checkout example +extra_css: + - "form-validation.css" +extra_js: + - src: "form-validation.js" +body_class: "bg-light" +--- + +
+
+
+ +

Checkout form

+

Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

+
+ +
+
+

+ Your cart + 3 +

+
    +
  • +
    +
    Product name
    + Brief description +
    + $12 +
    • +
  • +
    +
    Second product
    + Brief description +
    + $8 +
    • +
  • +
    +
    Third item
    + Brief description +
    + $5 +
    • +
  • +
    +
    Promo code
    + EXAMPLECODE +
    + −$5 +
    • +
  • + Total (USD) + $20 +
    • +
+ +
+
+ + +
+
+
+
+

Billing address

+
+
+
+ + +
+ Valid first name is required. +
+
+ +
+ + +
+ Valid last name is required. +
+
+ +
+ +
+ @ + +
+ Your username is required. +
+
+
+ +
+ + +
+ Please enter a valid email address for shipping updates. +
+
+ +
+ + +
+ Please enter your shipping address. +
+
+ +
+ + +
+ +
+ + +
+ Please select a valid country. +
+
+ +
+ + +
+ Please provide a valid state. +
+
+ +
+ + +
+ Zip code required. +
+
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +

Payment

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + Full name as displayed on card +
+ Name on card is required +
+
+ +
+ + +
+ Credit card number is required +
+
+ +
+ + +
+ Expiration date required +
+
+ +
+ + +
+ Security code required +
+
+
+ +
+ + +
+
+
+
+ + +
-- cgit v1.2.3