mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Make a form validation handler | handle form messages

Browse Source
This commit is contained in:
GeoSot
2021-05-19 18:37:26 +03:00
parent b6d27899fc
commit d18697cb5e
9 changed files with 311 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.2/examples/checkout-rtl/index.html
+1 -3
View File
@@ -4,8 +4,6 @@ title: مثال إتمام الشراء
direction: rtl
extra_css:
- "../checkout/form-validation.css"
extra_js:
- src: "../checkout/form-validation.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/form-validation.js
-19
View File
@@ -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
+1 -3
View File
@@ -3,8 +3,6 @@ layout: examples
title: Checkout example
extra_css:
- "form-validation.css"
extra_js:
- src: "form-validation.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>
site/content/docs/5.2/forms/validation.md
+18 -59
View File
@@ -4,9 +4,6 @@ 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.2/assets/js/validate-forms.js"
async: true
---
{{< callout warning >}}
@@ -30,80 +27,59 @@ With that in mind, consider the following demos for our custom form validation s
## Custom styles
For custom Bootstrap form validation messages, you'll need to add the `novalidate` boolean attribute to your `<form>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
For custom Bootstrap form validation messages, you'll need to add the data-bs-toggle="form-validation" `<form>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for `<select>`s are only available with `.form-select`, and not `.form-control`.
{{< example >}}
<form class="row g-3 needs-validation" novalidate>
<form class="row g-3" data-bs-toggle="form-validation">
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required data-bs-valid="Looks good!" data-bs-invalid="Please, provide a valid Name!">
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required data-bs-valid="Looks good!">
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required data-bs-invalid="Please choose a username.">
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
<input type="text" class="form-control" id="validationCustom03" required data-bs-invalid="Please provide a valid city.">
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<select class="form-select" id="validationCustom04" required data-bs-invalid="Please select a valid state.">
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
<input type="text" class="form-control" id="validationCustom05" required data-bs-invalid="Please provide a valid zip.">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required data-bs-invalid="You must agree before submitting.">
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
<button class="btn btn-danger" type="reset">Reset form</button>
</div>
</form>
{{< /example >}}
{{< example lang="js" show_preview="false" >}}
{{< js.inline >}}
{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/validate-forms.js") -}}
{{< /js.inline >}}
{{< /example >}}
@@ -294,57 +270,40 @@ Validation styles are available for the following form controls and components:
If your form layout allows it, you can swap the `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
{{< example >}}
<form class="row g-3 needs-validation" novalidate>
<form class="row g-3" data-bs-toggle="form-validation" data-bs-type="tooltip" >
<div class="col-md-4 position-relative">
<label for="validationTooltip01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required data-bs-valid="Looks good!">
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltip02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required data-bs-valid="Looks good!">
</div>
<div class="col-md-4 position-relative">
<label for="validationTooltipUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required data-bs-invalid="Please choose a username.">
</div>
</div>
<div class="col-md-6 position-relative">
<label for="validationTooltip03" class="form-label">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
<input type="text" class="form-control" id="validationTooltip03" required data-bs-invalid="Please provide a valid city.">
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip04" class="form-label">State</label>
<select class="form-select" id="validationTooltip04" required>
<select class="form-select" id="validationTooltip04" required data-bs-invalid="Please select a valid state.">
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
<input type="text" class="form-control" id="validationTooltip05" required data-bs-invalid="Please provide a valid zip.">
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
<button class="btn btn-danger" type="reset">Reset form</button>
</div>
</form>
{{< /example >}}