Ifọwọsi
Pese awọn esi ti o niyelori, ṣiṣe iṣe si awọn olumulo rẹ pẹlu afọwọsi fọọmu HTML5, nipasẹ awọn ihuwasi aiyipada aṣawakiri tabi awọn aṣa aṣa ati JavaScript.
Bawo ni o ṣe n ṣiṣẹ
Eyi ni bii afọwọsi fọọmu ṣiṣẹ pẹlu Bootstrap:
- Afọwọsi fọọmu HTML jẹ lilo nipasẹ awọn kilasi afarape meji ti CSS,
:invalid
ati:valid
. O kan si<input>
,<select>
, ati<textarea>
awọn eroja. - Bootstrap dopin
:invalid
ati:valid
awọn aza si kilasi obi.was-validated
, nigbagbogbo loo si<form>
. Bibẹẹkọ, eyikeyi aaye ti a beere laisi iye kan fihan bi aifẹ lori fifuye oju-iwe. Ni ọna yii, o le yan igba lati mu wọn ṣiṣẹ (paapaa lẹhin igbidanwo ifakalẹ fọọmu). - Lati tun irisi fọọmu naa tunto (fun apẹẹrẹ, ninu ọran ti awọn ifisilẹ fọọmu ti o ni agbara nipa lilo AJAX), yọ
.was-validated
kilasi kuro<form>
lẹẹkansi lẹhin ifakalẹ. - Gẹgẹbi ipadasẹhin,
.is-invalid
ati.is-valid
awọn kilasi le ṣee lo dipo awọn kilasi afarape fun afọwọsi ẹgbẹ olupin . Wọn ko nilo.was-validated
kilasi obi kan. - Nitori awọn idiwọ ni bii CSS ṣe n ṣiṣẹ, a ko le (ni lọwọlọwọ) lo awọn aṣa si
<label>
eyiti o wa ṣaaju iṣakoso fọọmu ni DOM laisi iranlọwọ ti JavaScript aṣa. - Gbogbo awọn aṣawakiri ode oni ṣe atilẹyin API afọwọsi idilọwọ , lẹsẹsẹ awọn ọna JavaScript fun imudari awọn iṣakoso fọọmu.
- Awọn ifiranšẹ esi le lo awọn aṣiṣe aṣawakiri (yatọ fun ẹrọ aṣawakiri kọọkan, ati aiṣedeede nipasẹ CSS) tabi awọn aza esi ti aṣa wa pẹlu HTML afikun ati CSS.
- O le pese awọn ifiranṣẹ ifọwọsi aṣa pẹlu
setCustomValidity
ni JavaScript.
Pẹlu iyẹn ni lokan, ṣe akiyesi awọn demos wọnyi fun awọn aza afọwọsi fọọmu aṣa wa, awọn kilasi ẹgbẹ olupin yiyan, ati awọn aseku aṣawakiri.
Awọn aṣa aṣa
Fun awọn ifiranse fọọmu Bootstrap aṣa, iwọ yoo nilo lati ṣafikun novalidate
abuda boolean si faili faili rẹ <form>
. Eyi mu awọn imọran irinṣẹ esi aiyipada ẹrọ aṣawakiri ṣiṣẹ, ṣugbọn tun pese iraye si awọn API afọwọsi fọọmu ni JavaScript. Gbiyanju lati fi awọn fọọmu ni isalẹ; JavaScript wa yoo ṣe idiwọ bọtini ifisilẹ ati yi awọn esi pada si ọ. Nigbati o ba n gbiyanju lati fi silẹ, iwọ yoo rii :invalid
ati :valid
awọn aṣa ti a lo si awọn iṣakoso fọọmu rẹ.
Awọn ara esi ti aṣa lo awọn awọ aṣa, awọn aala, awọn aza idojukọ, ati awọn aami abẹlẹ lati ṣe ibasọrọ dara si awọn esi. Awọn aami abẹlẹ fun <select>
s wa pẹlu .form-select
, kii ṣe .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)
})
})()
Awọn aṣiṣe aṣawakiri
Ko nifẹ si awọn ifiranṣẹ esi afọwọsi aṣa tabi kikọ JavaScript lati yi awọn ihuwasi fọọmu pada? O dara, o le lo awọn aṣiṣe aṣawakiri. Gbiyanju lati firanṣẹ fọọmu ni isalẹ. Da lori ẹrọ aṣawakiri rẹ ati OS, iwọ yoo rii ara esi ti o yatọ diẹ diẹ.
Lakoko ti awọn aza esi wọnyi ko le ṣe aṣa pẹlu CSS, o tun le ṣe akanṣe ọrọ esi nipasẹ 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>
Ẹgbẹ olupin
A ṣeduro lilo afọwọsi-ẹgbẹ alabara, ṣugbọn ti o ba nilo afọwọsi ẹgbẹ olupin, o le tọkasi invalid ati awọn aaye fọọmu to wulo pẹlu .is-invalid
ati .is-valid
. Ṣe akiyesi pe .invalid-feedback
o tun ṣe atilẹyin pẹlu awọn kilasi wọnyi.
Fun awọn aaye aiṣedeede, rii daju pe esi ti ko tọ / ifiranṣẹ aṣiṣe ni nkan ṣe pẹlu aaye fọọmu ti o yẹ ni lilo aria-describedby
(ṣakiyesi pe ẹda yii ngbanilaaye diẹ sii ju ọkan id
lọ lati tọka, ti aaye naa ba ti tọka si ọrọ fọọmu afikun).
Lati ṣatunṣe awọn ọran pẹlu awọn redio aala , awọn ẹgbẹ titẹ sii nilo kilasi afikun .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>
Awọn eroja atilẹyin
Awọn ara afọwọsi wa fun awọn iṣakoso fọọmu atẹle ati awọn paati:
<input>
s ati<textarea>
s pẹlu.form-control
(pẹlu to ọkan.form-control
ninu awọn ẹgbẹ titẹ sii)<select>
s pẹlu.form-select
.form-check
s
<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>
Awọn imọran irinṣẹ
Ti iṣeto fọọmu rẹ ba gba laaye, o le paarọ awọn .{valid|invalid}-feedback
kilasi fun .{valid|invalid}-tooltip
awọn kilasi lati ṣafihan awọn esi afọwọsi ni ilana irinṣẹ ara. Rii daju pe o ni obi pẹlu position: relative
lori rẹ fun ipo ohun elo. Ni apẹẹrẹ ni isalẹ, awọn kilasi ọwọn wa ti ni eyi tẹlẹ, ṣugbọn iṣẹ akanṣe rẹ le nilo iṣeto yiyan.
<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
Awọn oniyipada
$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
Awọn apopọ meji ni idapo papọ, nipasẹ lupu wa , lati ṣe agbekalẹ awọn aza esi afọwọsi fọọmu wa.
@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;
}
}
}
}
Maapu
Eyi ni maapu Sass afọwọsi lati _variables.scss
. Pari tabi fa eyi pọ si lati ṣe ipilẹṣẹ oriṣiriṣi tabi awọn ipinlẹ afikun.
$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
)
);
Awọn maapu ti $form-validation-states
le ni awọn paramita iyan mẹta lati bori awọn itọsona irinṣẹ ati awọn aza idojukọ.
Loop
Ti a lo lati ṣe iwọn lori $form-validation-states
awọn iye maapu lati ṣe agbekalẹ awọn aza afọwọsi wa. Eyikeyi awọn iyipada si maapu Sass ti o wa loke yoo han ninu CSS ti o ṣajọ nipasẹ yipo yii.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Isọdi ara ẹni
Awọn ipinlẹ afọwọsi le jẹ adani nipasẹ Sass pẹlu $form-validation-states
maapu naa. Ti o wa ninu _variables.scss
faili wa, maapu Sass yii ni bii a ṣe n ṣe ipilẹṣẹ aiyipada valid
/ invalid
awọn ipinlẹ afọwọsi. To wa ni maapu oni ite kan fun isọdi awọ ara ilu kọọkan, aami, awọ ọpa irinṣẹ, ati ojiji idojukọ. Lakoko ti ko si awọn ipinlẹ miiran ti o ṣe atilẹyin nipasẹ awọn aṣawakiri, awọn ti nlo awọn aṣa aṣa le ṣafikun awọn abajade fọọmu eka diẹ sii ni irọrun.
Jọwọ ṣe akiyesi pe a ko ṣeduro awọn $form-validation-states
iye isọdi laisi tun ṣe atunṣe form-validation-state
mixin .