Επικύρωση
Παρέχετε πολύτιμα, πρακτικά σχόλια στους χρήστες σας με επικύρωση φόρμας HTML5, μέσω προεπιλεγμένων συμπεριφορών του προγράμματος περιήγησης ή προσαρμοσμένων στυλ και JavaScript.
Πως δουλεύει
Δείτε πώς λειτουργεί η επικύρωση φόρμας με το Bootstrap:
- Η επικύρωση φόρμας HTML εφαρμόζεται μέσω των δύο ψευδοκλάσεων του CSS
:invalid
και:valid
. Ισχύει για<input>
,<select>
, και<textarea>
στοιχεία. - Το Bootstrap καλύπτει τα στυλ
:invalid
και:valid
στη γονική.was-validated
κλάση, που συνήθως εφαρμόζονται στο<form>
. Διαφορετικά, οποιοδήποτε απαιτούμενο πεδίο χωρίς τιμή εμφανίζεται ως μη έγκυρο κατά τη φόρτωση της σελίδας. Με αυτόν τον τρόπο, μπορείτε να επιλέξετε πότε θα τα ενεργοποιήσετε (συνήθως μετά την απόπειρα υποβολής φόρμας). - Για να επαναφέρετε την εμφάνιση της φόρμας (για παράδειγμα, στην περίπτωση υποβολών δυναμικής φόρμας με χρήση AJAX), αφαιρέστε την
.was-validated
κλάση από την<form>
ξανά μετά την υποβολή. - Ως εναλλακτική λύση,
.is-invalid
και οι.is-valid
κλάσεις μπορούν να χρησιμοποιηθούν αντί για τις ψευδο-κλάσεις για επικύρωση από την πλευρά του διακομιστή . Δεν απαιτούν.was-validated
τάξη γονέα. - Λόγω περιορισμών στον τρόπο λειτουργίας του CSS, δεν μπορούμε (προς το παρόν) να εφαρμόσουμε στυλ σε ένα στοιχείο
<label>
που βρίσκεται πριν από ένα στοιχείο ελέγχου φόρμας στο DOM χωρίς τη βοήθεια προσαρμοσμένης JavaScript. - Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το API επικύρωσης περιορισμών , μια σειρά μεθόδων JavaScript για την επικύρωση στοιχείων ελέγχου φορμών.
- Τα μηνύματα σχολίων ενδέχεται να χρησιμοποιούν τις προεπιλογές του προγράμματος περιήγησης (διαφορετικές για κάθε πρόγραμμα περιήγησης και μη μορφοποιημένες μέσω CSS) ή τα προσαρμοσμένα στυλ σχολίων μας με επιπλέον HTML και CSS.
- Μπορείτε να παρέχετε προσαρμοσμένα μηνύματα εγκυρότητας
setCustomValidity
σε JavaScript.
Έχοντας αυτό υπόψη, εξετάστε τις ακόλουθες επιδείξεις για τα προσαρμοσμένα στυλ επικύρωσης φόρμας, τις προαιρετικές κλάσεις από την πλευρά του διακομιστή και τις προεπιλογές του προγράμματος περιήγησης.
Προσαρμοσμένα στυλ
Για προσαρμοσμένα μηνύματα επικύρωσης φόρμας Bootstrap, θα πρέπει να προσθέσετε το novalidate
χαρακτηριστικό boolean στο <form>
. Αυτό απενεργοποιεί τις προεπιλεγμένες συμβουλές εργαλείων σχολίων του προγράμματος περιήγησης, αλλά εξακολουθεί να παρέχει πρόσβαση στα API επικύρωσης φορμών στο JavaScript. Προσπαθήστε να υποβάλετε την παρακάτω φόρμα. Η JavaScript μας θα παρεμποδίσει το κουμπί υποβολής και θα σας μεταδώσει σχόλια. Όταν προσπαθείτε να υποβάλετε, θα δείτε τα στυλ :invalid
και που εφαρμόζονται στα στοιχεία ελέγχου της φόρμας σας.:valid
Τα προσαρμοσμένα στυλ σχολίων εφαρμόζουν προσαρμοσμένα χρώματα, περιγράμματα, στυλ εστίασης και εικονίδια φόντου για καλύτερη επικοινωνία των σχολίων. Τα εικονίδια φόντου για <select>
s είναι διαθέσιμα μόνο με .form-select
και όχι .form-control
.
<form class="row g-3 needs-validation" novalidate>
<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>
</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>
</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>
</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>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<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>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<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>
</div>
</form>
// 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)
})
})()
Προεπιλογές προγράμματος περιήγησης
Δεν σας ενδιαφέρει τα προσαρμοσμένα μηνύματα σχολίων επικύρωσης ή να γράψετε JavaScript για να αλλάξετε συμπεριφορές φόρμας; Όλα καλά, μπορείτε να χρησιμοποιήσετε τις προεπιλογές του προγράμματος περιήγησης. Δοκιμάστε να υποβάλετε την παρακάτω φόρμα. Ανάλογα με το πρόγραμμα περιήγησης και το λειτουργικό σας σύστημα, θα δείτε ένα ελαφρώς διαφορετικό στυλ σχολίων.
Ενώ αυτά τα στυλ σχολίων δεν μπορούν να διαμορφωθούν με CSS, μπορείτε ακόμα να προσαρμόσετε το κείμενο σχολίων μέσω JavaScript.
<form class="row g-3">
<div class="col-md-4">
<label for="validationDefault01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-4">
<label for="validationDefault02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
<div class="col-md-4">
<label for="validationDefaultUsername" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
<div class="col-md-6">
<label for="validationDefault03" class="form-label">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3">
<label for="validationDefault04" class="form-label">State</label>
<select class="form-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3">
<label for="validationDefault05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Πλευρά του διακομιστή
Συνιστούμε τη χρήση επικύρωσης από την πλευρά του πελάτη, αλλά σε περίπτωση που χρειάζεστε επικύρωση από την πλευρά του διακομιστή, μπορείτε να υποδείξετε μη έγκυρα και έγκυρα πεδία φόρμας με .is-invalid
και .is-valid
. Σημειώστε ότι .invalid-feedback
υποστηρίζεται και με αυτές τις κλάσεις.
Για μη έγκυρα πεδία, βεβαιωθείτε ότι η μη έγκυρη ανάδραση/μήνυμα σφάλματος συσχετίζεται με το σχετικό πεδίο φόρμας χρησιμοποιώντας aria-describedby
(σημειώνοντας ότι αυτό το χαρακτηριστικό επιτρέπει την αναφορά περισσότερων του ενός id
, σε περίπτωση που το πεδίο δείχνει ήδη πρόσθετο κείμενο φόρμας).
Για να διορθωθούν προβλήματα με τις ακτίνες συνόρων , οι ομάδες εισόδου απαιτούν μια πρόσθετη .has-validation
κλάση.
<form class="row g-3">
<div class="col-md-4">
<label for="validationServer01" class="form-label">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServer02" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
<div id="validationServerUsernameFeedback" class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationServer03" class="form-label">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationServer04" class="form-label">State</label>
<select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationServer05" class="form-label">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" 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>
</div>
</form>
Υποστηριζόμενα στοιχεία
Τα στυλ επικύρωσης είναι διαθέσιμα για τα ακόλουθα στοιχεία ελέγχου φόρμας και στοιχεία:
<input>
s και<textarea>
s με.form-control
(συμπεριλαμβανομένου έως και ενός.form-control
σε ομάδες εισόδου)<select>
s με.form-select
.form-check
μικρό
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea" class="form-label">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
</div>
<div class="form-check mb-3">
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="form-select" required aria-label="select example">
<option value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid select feedback</div>
</div>
<div class="mb-3">
<input type="file" class="form-control" aria-label="file example" required>
<div class="invalid-feedback">Example invalid form file feedback</div>
</div>
<div class="mb-3">
<button class="btn btn-primary" type="submit" disabled>Submit form</button>
</div>
</form>
Συμβουλές εργαλείων
Εάν η διάταξη της φόρμας σας το επιτρέπει, μπορείτε να ανταλλάξετε τις .{valid|invalid}-feedback
κλάσεις με .{valid|invalid}-tooltip
κλάσεις για να εμφανίσετε σχόλια επικύρωσης σε μια επεξήγηση εργαλείου με στυλ. Βεβαιωθείτε ότι έχετε μαζί του έναν γονέα position: relative
για την τοποθέτηση της συμβουλής εργαλείου. Στο παρακάτω παράδειγμα, οι τάξεις στηλών μας το έχουν ήδη, αλλά το έργο σας μπορεί να απαιτεί μια εναλλακτική ρύθμιση.
<form class="row g-3 needs-validation" novalidate>
<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>
</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>
</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>
</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>
</div>
<div class="col-md-3 position-relative">
<label for="validationTooltip04" class="form-label">State</label>
<select class="form-select" id="validationTooltip04" required>
<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>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Sass
Μεταβλητές
$form-feedback-margin-top: $form-text-margin-top;
$form-feedback-font-size: $form-text-font-size;
$form-feedback-font-style: $form-text-font-style;
$form-feedback-valid-color: $success;
$form-feedback-invalid-color: $danger;
$form-feedback-icon-valid-color: $form-feedback-valid-color;
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");
Μείγματα
Δύο mixins συνδυάζονται μαζί, μέσω του βρόχου μας , για να δημιουργήσουν τα στυλ σχολίων επικύρωσης φόρμας.
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $color;
box-shadow: $focus-box-shadow;
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group .form-control,
.input-group .form-select {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 1;
} @else if $state == "invalid" {
z-index: 2;
}
&:focus {
z-index: 3;
}
}
}
}
Χάρτης
Αυτός είναι ο χάρτης επικύρωσης Sass από _variables.scss
. Αντικαταστήστε ή επεκτείνετε αυτό για να δημιουργήσετε διαφορετικές ή πρόσθετες καταστάσεις.
$form-validation-states: (
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
);
Οι χάρτες του $form-validation-states
μπορούν να περιέχουν τρεις προαιρετικές παραμέτρους για να παρακάμψουν τις συμβουλές εργαλείων και τα στυλ εστίασης.
Βρόχος
Χρησιμοποιείται για την επανάληψη των $form-validation-states
τιμών του χάρτη για τη δημιουργία των στυλ επικύρωσής μας. Οποιεσδήποτε τροποποιήσεις στον παραπάνω χάρτη Sass θα αντικατοπτρίζονται στο μεταγλωττισμένο CSS σας μέσω αυτού του βρόχου.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Προσαρμογή
Οι καταστάσεις επικύρωσης μπορούν να προσαρμοστούν μέσω Sass με τον $form-validation-states
χάρτη. _variables.scss
Αυτός ο χάρτης Sass, που βρίσκεται στο αρχείο μας , είναι ο τρόπος με τον οποίο δημιουργούμε τις προεπιλεγμένες καταστάσεις valid
/ invalid
καταστάσεις επικύρωσης. Περιλαμβάνεται ένας ένθετος χάρτης για την προσαρμογή του χρώματος, του εικονιδίου, του χρώματος συμβουλής εργαλείου και της σκιάς εστίασης κάθε κατάστασης. Αν και καμία άλλη κατάσταση δεν υποστηρίζεται από προγράμματα περιήγησης, όσοι χρησιμοποιούν προσαρμοσμένα στυλ μπορούν εύκολα να προσθέσουν σχόλια πιο περίπλοκης φόρμας.
Λάβετε υπόψη ότι δεν συνιστούμε την προσαρμογή $form-validation-states
τιμών χωρίς να τροποποιήσετε επίσης το form-validation-state
mixin .