Make a form validation handler | handle form messages

add "aria-describedby" attribute on "supported elements" section

add "aria-describedby" attribute on server side succeed validation messages

site/content/docs/5.2/examples/checkout-rtl/index.html

@@ -4,8 +4,6 @@ title: مثال إتمام الشراء
 direction: rtl
 extra_css:
   - "../checkout/checkout.css"
-extra_js:
-  - src: "../checkout/checkout.js"
 body_class: "bg-light"
 ---
 
@@ -67,7 +65,7 @@ body_class: "bg-light"
       </div>
       <div class="col-md-7 col-lg-8">
         <h4 class="mb-3">عنوان الفوترة</h4>
-        <form class="needs-validation" novalidate>
+        <form data-bs-toggle="form-validation">
           <div class="row g-3">
             <div class="col-sm-6">
               <label for="firstName" class="form-label">الاسم الأول</label>

site/content/docs/5.2/examples/checkout/checkout.js

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

site/content/docs/5.2/examples/checkout/index.html

@@ -3,8 +3,6 @@ layout: examples
 title: Checkout example
 extra_css:
   - "checkout.css"
-extra_js:
-  - src: "checkout.js"
 body_class: "bg-light"
 ---
 
@@ -66,7 +64,7 @@ body_class: "bg-light"
       </div>
       <div class="col-md-7 col-lg-8">
         <h4 class="mb-3">Billing address</h4>
-        <form class="needs-validation" novalidate>
+        <form data-bs-toggle="form-validation">
           <div class="row g-3">
             <div class="col-sm-6">
               <label for="firstName" class="form-label">First name</label>