in English
Санҷиш
Тавассути рафтори пешфарз браузер ё сабкҳои фармоишӣ ва 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 иловагӣ истифода баранд.
- Шумо метавонед паёмҳои эътибории фармоиширо бо
setCustomValidityJavaScript пешниҳод кунед.
Бо дарназардошти ин, намоишҳои зеринро барои услубҳои тасдиқи шакли фармоишии мо, синфҳои ихтиёрии сервер ва пешфарзҳои браузер баррасӣ кунед.
Услубҳои фармоишӣ
Барои паёмҳои тасдиқкунии шакли 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
(() => {
'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)
})
})()Пешфарзҳои браузер
Оё ба паёмҳои бозгашти фармоишӣ ё навиштани 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" 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.73.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-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
}
}
}
.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:not(:focus),
> .form-select:not(:focus),
> .form-floating:not(:focus-within) {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 3;
} @else if $state == "invalid" {
z-index: 4;
}
}
}
}
}
Харита
Ин харитаи тасдиқи 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тафтишро тавлид мекунем. Дар он харитаи лона гузошта шудааст, ки барои танзими ранг, нишона, ранги асбобҳо ва сояи фокус ҳар як давлатро танзим мекунад. Гарчанде ки ягон давлатҳои дигар аз ҷониби браузерҳо дастгирӣ намешаванд, онҳое, ки услубҳои фармоиширо истифода мебаранд, метавонанд ба осонӣ фикру мулоҳизаҳои мураккабтарро илова кунанд.