Ukuqinisekiswa

Nikeza ngexabiso, impendulo ebambekayo kubasebenzisi bakho ngoqinisekiso lwefomu yeHTML5, ngokuziphatha okungagqibekanga kwesikhangeli okanye izimbo zesiko kunye neJavaScript.

Kweli phepha

Siyazi ukuba okwangoku izimbo zokuqinisekisa ngokwesiko lomxhasi kunye neengcebiso zesixhobo azifikeleleki, kuba azivezwanga kubuchwephesha obuncedisayo. Ngelixa sisebenza kwisisombululo, singacebisa nokuba sisebenzise ukhetho lwecala lomncedisi okanye indlela yokuqinisekisa isikhangeli esihlala sikhona.

Ingaba isebenza kanjani

Nantsi indlela ukuqinisekiswa kwefomu kusebenza ngayo ngeBootstrap:

Uqinisekiso lwefom ye-HTML lusetyenziswa ngeeklasi ezimbini zobuxoki zeCSS, :invalidkunye :valid. Isebenza kwi <input>, <select>, kunye <textarea>neziqalelo.
I-Bootstrap imida :invalidkunye :validnezimbo .was-validatedkwiklasi yabazali, ihlala isetyenziswa kwi <form>. Kungenjalo, nayiphi na indawo efunekayo ngaphandle kwexabiso ibonisa njengengasebenziyo kumthwalo wephepha. Ngale ndlela, usenokukhetha ukuba zisebenze nini na (ngokwesiqhelo emva kokuba kuzanywa ukungenisa kwefomu).
Ukusetha kwakhona inkangeleko yefom (umzekelo, kwimeko yokungeniswa kwefomu eguquguqukayo usebenzisa i-AJAX), susa .was-validatediklasi ukusuka <form>kwakhona emva kokungeniswa.
Njengomba wokubuyela umva, .is-invalidkwaye .is-validiiklasi zinokusetyenziswa endaweni yeeklasi zobuxoki zoqinisekiso lwecala lomncedisi . Abafuni .was-validatedklasi yabazali.
Ngenxa yemiqobo kwindlela esebenza ngayo i-CSS, asinako (okwangoku) ukusebenzisa izitayile <label>kuleyo iza phambi kolawulo lwefom kwiDOM ngaphandle koncedo lweJavaScript yesiko.
Zonke iiphequluli zanamhlanje zixhasa umqobo wokuqinisekisa i-API , uthotho lweendlela zeJavaScript zokuqinisekisa ulawulo lwefom.
Imiyalezo yengxelo inokusebenzisa isikhangeli esingagqibekanga (eyahlukileyo kumkhangeli zincwadi ngamnye, kwaye ayinasitayile ngokusebenzisa iCSS) okanye izimbo zethu zengxelo eyongezelelweyo ngeHTML kunye neCSS.
Unokubonelela ngemiyalezo yokuqinisekisa ngokwesiko setCustomValiditykwiJavaScript.

Unaloo nto engqondweni, qwalasela ezi demos zilandelayo zeendlela zethu zokuqinisekisa ifom yesiko, iiklasi ezikhethiweyo ze-server-side, kunye nokusilela kwesikhangeli.

Izimbo zesiko

Kwimiyalezo yoqinisekiso lwendlela yeBootstrap yesiko, kuya kufuneka udibanise novalidateuphawu lwe boolean kweyakho <form>. Oku kuvala iingcebiso zesixhobo sengxelo yesikhangeli, kodwa isabonelela ngokufikelela kwifomu yoqinisekiso lweAPIs kwiJavaScript. Zama ukungenisa le fomu ingezantsi; yethu iJavaScript iya kuthintela iqhosha lokungenisa kwaye idlulisele ingxelo kuwe. Xa uzama ukungenisa, uya kubona iindlela :invalidkunye :validnezimbo ezisetyenziswa kulawulo lwakho lwefom.

Izitayile zempendulo yesiko zisebenzisa imibala eqhelekileyo, imida, izimbo zokugxila, kunye neempawu ezingasemva ukunxibelelana ngcono ngengxelo. Imifanekiso engasemva ye <select>s ifumaneka kuphela nge .form-select, kwaye hayi .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)
    })
})()

Ukungagqibeki kwesikhangeli

Awunamdla kwimiyalezo yengxelo yokuqinisekisa okanye ukubhala iJavaScript ukutshintsha indlela yokuziphatha? Konke kulungile, ungasebenzisa ukungagqibeki kwesikhangeli. Zama ukuthumela le fomu ingezantsi. Ngokuxhomekeke kwisikhangeli sakho kunye ne-OS, uya kubona indlela eyahlukileyo kancinane yengxelo.

Ngelixa ezi zimbo zempendulo zingenako ukwenziwa ngesitayile ngeCSS, usenokwenza ngokwesiko lombhalo wengxelo ngeJavaScript.

<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>

Icala lomncedisi

Sicebisa ukuba kusetyenziswe ungqinisiso lwecala lomxhasi, kodwa xa ufuna uqinisekiso lwecala lomncedisi, ungabonisa iindawo ezingasebenziyo nezisebenzayo zefomu .is-invalidkunye .is-valid. Qaphela ukuba .invalid-feedbackikwaxhaswa ngezi klasi.

Kwimihlaba engasebenziyo, qinisekisa ukuba ingxelo engasebenziyo/umyalezo wemposiso unxulunyaniswa nendawo yefomu efanelekileyo usebenzisa aria-describedby(uqaphela ukuba olu phawu luvumela ukuba kubhekiselwe ngaphezu kwesinye id, kwimeko apho umhlaba sele ukhomba kumbhalo wohlobo olongezelelweyo).

Ukulungisa imiba ngomda weradii , amaqela angenayo afuna iklasi eyongezelelweyo .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>

Izinto ezixhaswayo

Izimbo zokuqinisekisa ziyafumaneka kolu lawulo lweefomu zilandelayo kunye namacandelo:

<input>s kunye <textarea>s kunye .form-control(kubandakanya ukuya kwelinye .form-controlkumaqela egalelo)
<select>s kunye.form-select
.form-checks

<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>

Iingcebiso

Ukuba uyilo lwefomu yakho luyakuvumela, ungatshintshanisa .{valid|invalid}-feedbackiiklasi .{valid|invalid}-tooltipkwiiklasi ukubonisa ingxelo yokuqinisekisa kwisixhobo esinesitayile sesixhobo. Qinisekisa ukuba unomzali position: relativeophezu kwayo ukuze abeke incam yesixhobo. Kulo mzekelo ungezantsi, iiklasi zethu zekholomu sezinayo le nto, kodwa iprojekthi yakho inokufuna enye indlela yokuseta.

<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

Izinto eziguquguqukayo

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

Imixube

Imixube emibini zidityanisiwe kunye, nge- loop yethu , ukuvelisa iindlela zethu zokuqinisekisa impendulo.

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

Imephu

Olu luqinisekiso lwemephu ye-Sass evela _variables.scss. Bhala ngaphezulu okanye wandise oku ukuvelisa imimandla eyahlukeneyo okanye eyongezelelweyo.

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

Iimaphu ze $form-validation-stateszingaqulatha iiparameters ezithathu zokuzikhethela ukukhupha iincam zesixhobo kunye nezimbo zokugxila.

Umjikelo

Isetyenziselwa ukuphindaphinda $form-validation-statesamaxabiso emephu ukuvelisa izimbo zethu zokuqinisekisa. Naluphi na uhlengahlengiso kule mephu ye-Sass ingasentla iya kubonakala kwi-CSS yakho eqokelelweyo ngokusebenzisa le loop.

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

Ukwenza ngokwezifiso

Iimeko zokuqinisekisa zingenziwa ngokwezifiso nge-Sass $form-validation-statesngemephu. Ifumaneka _variables.scsskwifayile yethu, le mephu ye-Sass yindlela esenza ngayo izinto ezingagqibekanga valid/ invalidzokuqinisekisa. Ibandakanyiwe yimephu ebekwe kwindlwane yokwenza umbala welizwe ngalinye, i-ayikhoni, umbala wesixhobo, kunye nesithunzi sokugxila. Ngelixa kungekho amanye amazwe axhaswa ngabakhangeli, abo basebenzisa izitayile zesiko banokongeza ngokulula ingxelo yefomu entsonkothileyo.

Nceda qaphela ukuba asikucebisi ukwenza $form-validation-statesamaxabiso ngokwezifiso ngaphandle kokuguqula form-validation-stateumxube .