Dilysu
Rhowch adborth gwerthfawr y gellir ei weithredu i'ch defnyddwyr gyda dilysiad ffurflen HTML5, trwy ymddygiadau rhagosodedig y porwr neu arddulliau arferol a JavaScript.
Sut mae'n gweithio
Dyma sut mae dilysu ffurflenni yn gweithio gyda Bootstrap:
- Cymhwysir dilysiad ffurflen HTML trwy ddau ffug-ddosbarth CSS,
:invalid
a:valid
. Mae'n berthnasol i<input>
,<select>
, ac<textarea>
elfennau. - Mae Bootstrap yn cwmpasu
:invalid
ac:valid
arddulliau i ddosbarth rhiant.was-validated
, fel arfer yn berthnasol i'r<form>
. Fel arall, mae unrhyw faes gofynnol heb werth yn ymddangos fel un annilys ar lwyth tudalen. Fel hyn, gallwch ddewis pryd i'w actifadu (yn nodweddiadol ar ôl ceisio cyflwyno ffurflen). - I ailosod ymddangosiad y ffurflen (er enghraifft, yn achos cyflwyniadau ffurflen deinamig gan ddefnyddio AJAX), tynnwch y
.was-validated
dosbarth o'r<form>
eto ar ôl ei chyflwyno. - Fel wrth gefn,
.is-invalid
a.is-valid
gellir defnyddio dosbarthiadau yn lle'r ffug-ddosbarthiadau ar gyfer dilysu ochr y gweinydd . Nid oes angen.was-validated
dosbarth rhiant arnynt. - Oherwydd cyfyngiadau ar sut mae CSS yn gweithio, ni allwn (ar hyn o bryd) gymhwyso arddulliau i a
<label>
sy'n dod cyn rheolaeth ffurflen yn y DOM heb gymorth JavaScript arferol. - Mae pob porwr modern yn cefnogi'r API dilysu cyfyngiad , cyfres o ddulliau JavaScript ar gyfer dilysu rheolaethau ffurflen.
- Gall negeseuon adborth ddefnyddio rhagosodiadau'r porwr (gwahanol ar gyfer pob porwr, ac anstyl trwy CSS) neu ein harddulliau adborth personol gyda HTML a CSS ychwanegol.
- Gallwch ddarparu negeseuon dilysrwydd personol gyda
setCustomValidity
yn JavaScript.
Gyda hynny mewn golwg, ystyriwch y demos canlynol ar gyfer ein harddulliau dilysu ffurflenni arferol, dosbarthiadau ochr gweinydd dewisol, a rhagosodiadau porwr.
Arddulliau personol
Ar gyfer negeseuon dilysu ffurflen Bootstrap wedi'u teilwra, bydd angen i chi ychwanegu'r novalidate
priodoledd boolean at eich <form>
. Mae hyn yn analluogi awgrymiadau cymorth adborth rhagosodedig y porwr, ond mae'n dal i ddarparu mynediad i'r APIs dilysu ffurflenni yn JavaScript. Ceisiwch gyflwyno'r ffurflen isod; bydd ein JavaScript yn rhyng-gipio'r botwm cyflwyno ac yn trosglwyddo adborth i chi. Wrth geisio cyflwyno, byddwch yn gweld yr arddulliau :invalid
a'r :valid
arddulliau a ddefnyddir i reolaethau eich ffurflen.
Mae arddulliau adborth personol yn cymhwyso lliwiau, ffiniau, arddulliau ffocws ac eiconau cefndir i gyfathrebu adborth yn well. Mae eiconau cefndir ar gyfer <select>
s ond ar gael gyda .form-select
, ac nid .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)
})
})()
Rhagosodiadau porwr
Dim diddordeb mewn negeseuon adborth dilysu personol neu ysgrifennu JavaScript i newid ymddygiadau ffurf? Da iawn, gallwch ddefnyddio rhagosodiadau'r porwr. Ceisiwch gyflwyno'r ffurflen isod. Yn dibynnu ar eich porwr ac OS, fe welwch arddull adborth ychydig yn wahanol.
Er na ellir steilio'r arddulliau adborth hyn gyda CSS, gallwch barhau i addasu'r testun adborth trwy 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>
Ochr y gweinydd
Rydym yn argymell defnyddio dilysiad ochr y cleient, ond rhag ofn y bydd angen dilysu ochr y gweinydd arnoch, gallwch nodi meysydd ffurflen annilys a dilys gydag .is-invalid
a .is-valid
. Sylwch fod .invalid-feedback
y dosbarthiadau hyn hefyd yn cael eu cefnogi.
Ar gyfer meysydd annilys, sicrhewch fod y neges adborth/gwall annilys yn gysylltiedig â maes y ffurflen berthnasol gan ddefnyddio aria-describedby
(gan nodi bod y nodwedd hon yn caniatáu id
cyfeirio at fwy nag un, rhag ofn bod y maes eisoes yn pwyntio at destun ffurflen ychwanegol).
Er mwyn datrys problemau gyda radiysau ffin , mae angen .has-validation
dosbarth ychwanegol ar grwpiau mewnbwn.
<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>
Elfennau a gefnogir
Mae arddulliau dilysu ar gael ar gyfer y rheolyddion ffurflen a'r cydrannau canlynol:
<input>
s ac<textarea>
s gyda.form-control
(gan gynnwys hyd at un.form-control
mewn grwpiau mewnbwn)<select>
s gyda.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>
Cynghorion offer
Os yw cynllun eich ffurflen yn caniatáu hynny, gallwch gyfnewid y .{valid|invalid}-feedback
dosbarthiadau am .{valid|invalid}-tooltip
ddosbarthiadau i ddangos adborth dilysu mewn cyngor ag arddull. Gwnewch yn siŵr bod gennych riant position: relative
arno ar gyfer lleoli awgrymiadau cymorth. Yn yr enghraifft isod, mae gan ein dosbarthiadau colofn hwn eisoes, ond efallai y bydd angen gosodiad arall ar eich prosiect.
<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
Newidynnau
$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>");
cymysgeddau
Cyfunir dau gymysgedd gyda'i gilydd, trwy ein dolen , i gynhyrchu ein harddulliau adborth dilysu ffurflenni.
@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;
}
}
}
}
Map
Dyma'r map dilysu Sass o _variables.scss
. Diystyru neu ymestyn hyn i gynhyrchu cyflyrau gwahanol neu ychwanegol.
$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
)
);
Gall mapiau $form-validation-states
gynnwys tri pharamedr dewisol i ddiystyru awgrymiadau offer ac arddulliau ffocws.
Dolen
Fe'i defnyddir i ailadrodd dros $form-validation-states
werthoedd mapiau i gynhyrchu ein harddulliau dilysu. Bydd unrhyw addasiadau i'r map Sass uchod yn cael eu hadlewyrchu yn eich CSS a luniwyd drwy'r ddolen hon.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
Addasu
Gellir addasu cyflyrau dilysu trwy Sass gyda'r $form-validation-states
map. Wedi'i leoli yn ein _variables.scss
ffeil, y map Sass hwn yw sut rydym yn cynhyrchu'r cyflyrau rhagosodedig valid
/ invalid
dilysu. Wedi'i gynnwys mae map nythu ar gyfer addasu lliw, eicon, lliw cyngor offer a chysgod ffocws pob gwladwriaeth. Er nad oes unrhyw wladwriaethau eraill yn cael eu cefnogi gan borwyr, gall y rhai sy'n defnyddio arddulliau arferol ychwanegu adborth ffurf mwy cymhleth yn hawdd.
Sylwch nad ydym yn argymell addasu $form-validation-states
gwerthoedd heb hefyd addasu'r form-validation-state
mixin .