Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

Tabbatarwa

Bayar da ra'ayi mai mahimmanci, mai aiki ga masu amfani tare da ingantaccen tsari na HTML5, ta hanyar tsoffin halayen burauza ko salon al'ada da JavaScript.

A wannan shafi
Muna sane da cewa a halin yanzu salon tabbatarwa na al'ada na abokin ciniki da nasihun kayan aiki ba su samuwa, tunda ba a fallasa su ga fasahar taimako. Yayin da muke aiki kan mafita, muna ba da shawarar ko dai ta yin amfani da zaɓin gefen uwar garken ko hanyar tabbatar da mashigar tsohuwa.

Yadda yake aiki

Anan ga yadda ingantaccen tsari ke aiki tare da Bootstrap:

  • Ana amfani da ingantaccen tsarin HTML ta hanyar azuzuwan ɓarna biyu na CSS, :invalidda :valid. Ya shafi <input>, <select>, da <textarea>abubuwa.
  • Bootstrap ya keɓanta da salo :invalidda :validsalo zuwa ajin iyaye .was-validated, yawanci ana amfani da su ga <form>. In ba haka ba, kowane filin da ake buƙata ba tare da ƙima yana nunawa a matsayin mara inganci akan nauyin shafi. Ta wannan hanyar, zaku iya zaɓar lokacin kunna su (yawanci bayan an yi ƙoƙarin ƙaddamar da fom).
  • Don sake saita bayyanar fom (misali, a cikin yanayin ƙaddamar da tsari mai ƙarfi ta amfani da AJAX), cire .was-validatedajin daga <form>sake bayan ƙaddamarwa.
  • A matsayin koma baya, .is-invalidkuma .is-validana iya amfani da azuzuwan maimakon azuzuwan ƙididdiga don tabbatar da gefen uwar garken . Ba sa buƙatar .was-validatedajin iyaye.
  • Saboda ƙuntatawa a cikin yadda CSS ke aiki, ba za mu iya (a halin yanzu) amfani da salo ga <label>wanda ya zo gaban sarrafa tsari a cikin DOM ba tare da taimakon JavaScript na al'ada ba.
  • Duk masu bincike na zamani suna goyan bayan ingantaccen ingantaccen API , jerin hanyoyin JavaScript don tabbatar da sarrafa tsari.
  • Saƙonnin mayar da martani na iya yin amfani da abubuwan da suka dace na burauza (mabambanta ga kowane mai bincike, kuma wanda ba za a iya salo ta hanyar CSS ba) ko salon martani na al'ada tare da ƙarin HTML da CSS.
  • Kuna iya samar da saƙon ingantacce na al'ada da su setCustomValiditya cikin JavaScript.

Tare da wannan a zuciya, yi la'akari da fa'idodin demos masu zuwa don salon ingantaccen sigar mu ta al'ada, azuzuwan gefen uwar garken zaɓi, da rashin kuskuren burauza.

Salon al'ada

Don saƙon ingantaccen tsari na Bootstrap na al'ada, kuna buƙatar ƙara novalidatesifa ta boolean zuwa <form>. Wannan yana hana tsoffin bayanan bayanan kayan aikin mai bincike, amma har yanzu yana ba da dama ga API ɗin ingantaccen tsari a JavaScript. Yi ƙoƙarin ƙaddamar da fom ɗin da ke ƙasa; JavaScript ɗin mu zai katse maɓallin ƙaddamarwa kuma ya ba da amsa gare ku. Lokacin ƙoƙarin ƙaddamarwa, za ku ga da :invalidkuma :validsalon da aka yi amfani da su akan sarrafa fom ɗin ku.

Salon amsa na al'ada suna amfani da launuka na al'ada, iyakoki, salon mayar da hankali, da gumakan bango don ingantacciyar hanyar sadarwa. Gumakan bango na <select>s suna samuwa kawai tare da .form-select, kuma ba .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<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)
    })
})()

Matsalolin Browser

Ba ku da sha'awar saƙon martani na tabbatarwa na al'ada ko rubuta JavaScript don canza halayen tsari? Da kyau, zaku iya amfani da abubuwan da ba a iya amfani da su ba. Gwada ƙaddamar da fom ɗin da ke ƙasa. Dangane da burauzar ku da kuma OS, zaku ga salon ra'ayi daban-daban.

Duk da yake waɗannan salon amsa ba za a iya sa su tare da CSS ba, har yanzu kuna iya keɓance rubutun ra'ayin ta hanyar 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>

Gefen uwar garken

Muna ba da shawarar yin amfani da ingantaccen gefen abokin ciniki, amma idan kuna buƙatar ingantaccen gefen uwar garken, zaku iya nuna mara inganci da filayen fom tare .is-invalidda .is-valid. Lura cewa .invalid-feedbackkuma ana goyan bayan waɗannan azuzuwan.

Don filayen da ba su da inganci, tabbatar da cewa an haɗa saƙon kuskure mara inganci tare da filin da ya dace ta amfani da shi aria-describedby(lura da cewa wannan sifa tana ba da damar yin nuni fiye da ɗaya id, idan filin ya riga ya nuna ƙarin rubutu).

Don gyara al'amura tare da radiyon iyaka , ƙungiyoyin shigarwa suna buƙatar ƙarin .has-validationaji.

Yayi kyau!
Yayi kyau!
@
Da fatan za a zaɓi sunan mai amfani.
Da fatan za a samar da ingantaccen birni.
Da fatan za a zaɓi ingantacciyar yanayi.
Da fatan za a ba da ingantaccen zip.
Dole ne ku yarda kafin ƙaddamarwa. 
<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>

Abubuwan tallafi

Ana samun salon tabbatarwa don sarrafa nau'i mai zuwa da abubuwan haɗin gwiwa:

  • <input>s da <textarea>s tare da .form-control(gami da har zuwa ɗaya .form-controla cikin ƙungiyoyin shigarwa)
  • <select>s da.form-select
  • .form-checks
Da fatan za a shigar da saƙo a cikin yankin rubutu.
Misali rubutun amsa mara inganci
Ƙarin misali rubutu mara inganci
Misali zaɓi martani mara inganci
Misali ra'ayin fayil mara inganci 
<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>

Nasihun kayan aiki

Idan shimfidar tsari na ku ya ba shi damar, zaku iya musanya .{valid|invalid}-feedbackazuzuwan don .{valid|invalid}-tooltipazuzuwan don nuna ra'ayoyin ingantawa a cikin salo mai salo na kayan aiki. Tabbatar cewa kuna da iyaye tare da position: relativeshi don saka kayan aiki. A cikin misalin da ke ƙasa, azuzuwan rukunin mu sun riga sun sami wannan, amma aikinku na iya buƙatar saitin madadin.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<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

Masu canji

$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

Ana haɗe mixins guda biyu tare, ta hanyar madauki , don samar da salon ingantaccen bayanin mu.

@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;
      }
    }
  }
}

Taswira

Wannan shine ingantaccen taswirar Sass daga _variables.scss. Rage ko tsawaita wannan don samar da jihohi daban-daban ko ƙarin.

$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
  )
);

Taswirorin na $form-validation-statesiya ƙunsar sigogin zaɓi guda uku don ƙetare matakan kayan aiki da salon mayar da hankali.

Madauki

An yi amfani da shi don $form-validation-statesƙididdige ƙimar taswira don samar da salon ingantaccen mu. Duk wani gyare-gyare ga taswirar Sass na sama za a bayyana a cikin CSS ɗinku da aka haɗa ta wannan madauki.

@each $state, $data in $form-validation-states {
  @include form-validation-state($state, $data...);
}

Keɓancewa

Ana iya keɓance jihohin tabbatarwa ta hanyar Sass tare da $form-validation-statestaswira. Ana cikin _variables.scssfayil ɗin mu, wannan taswirar Sass shine yadda muke samar da tsoffin jihohi valid/ tabbatarwa. invalidHaɗe da taswirar gida don keɓance launi na kowace jiha, gunki, launi na kayan aiki, da inuwar mayar da hankali. Duk da yake babu wasu jihohi da masu bincike ke tallafawa, waɗanda ke amfani da salon al'ada na iya ƙara ƙarin ra'ayi mai rikitarwa cikin sauƙi.

Da fatan za a lura cewa ba mu bayar da shawarar keɓance $form-validation-statesƙima ba tare da gyaggyara abin haɗin form-validation-stateba .