Санҷиш
Тавассути рафтори пешфарз браузер ё сабкҳои фармоишӣ ва JavaScript ба корбарони худ бо тасдиқи шакли HTML5 фикру мулоҳизаҳои арзишманд ва қобили амал пешниҳод кунед.
Он чӣ гуна кор мекунад
Ин аст, ки чӣ тавр тасдиқи форма бо 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, мо наметавонем (ҳоло) сабкҳоро ба a
<label>
, ки пеш аз назорати форма дар DOM меояд, бе ёрии JavaScript фармоишӣ истифода барем. - Ҳама браузерҳои муосир API-и санҷиши маҳдудкуниро , як қатор усулҳои JavaScript-ро барои тасдиқи назорати шакл дастгирӣ мекунанд.
- Паёмҳои фикру мулоҳизаҳо метавонанд пешфарзҳои браузерро (барои ҳар як браузер гуногун ва аз тариқи CSS номуносиб) ё услубҳои бознигарии фармоишии моро бо HTML ва CSS иловагӣ истифода баранд.
- Шумо метавонед паёмҳои эътибории фармоиширо бо
setCustomValidity
JavaScript пешниҳод кунед.
Бо дарназардошти ин, намоишҳои зеринро барои услубҳои тасдиқи шакли фармоишии мо, синфҳои ихтиёрии сервер ва пешфарзҳои браузер баррасӣ кунед.
Услубҳои фармоишӣ
Барои паёмҳои тасдиқкунии шакли Bootstrap, шумо бояд novalidate
атрибути мантиқиро ба <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 барои тағир додани рафтори шакл манфиатдор нестед? Ҳама хуб, шумо метавонед пешфарзҳои браузерро истифода баред. Кӯшиш кунед, ки шакли зерро пешниҳод кунед. Вобаста аз браузер ва OS, шумо услуби каме фарқкунандаи фикру мулоҳизаҳоро хоҳед дид.
Гарчанде ки ин услубҳои фикру мулоҳизаҳоро бо 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>
с бо.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>
Сасс
Тағйирёбандаҳо
$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>");
Миксинҳо
Ду миксин тавассути ҳалқаи мо якҷоя якҷоя карда мешаванд, то услубҳои бозгашти шаклҳои моро тавлид кунанд.
@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
миксер танзим кунед.