Kutsimikizira

Perekani ndemanga zamtengo wapatali, zotheka kwa ogwiritsa ntchito anu potsimikizira mafomu a HTML5, pogwiritsa ntchito machitidwe osasintha a msakatuli kapena masitayelo anu ndi JavaScript.

Patsamba ili

Tikudziwa kuti pakadali pano masitayelo otsimikizira za kasitomala ndi zida sizikupezeka, chifukwa sawonetsedwa ndiukadaulo wothandizira. Pamene tikuyesetsa kupeza yankho, tingakulimbikitseni kugwiritsa ntchito njira ya mbali ya seva kapena njira yotsimikizira msakatuli.

Momwe zimagwirira ntchito

Umu ndi momwe kutsimikizira mawonekedwe kumagwirira ntchito ndi Bootstrap:

Kutsimikizika kwa mawonekedwe a HTML kumagwiritsidwa ntchito kudzera m'makalasi awiri achinyengo a CSS, :invalidndi :valid. Zimakhudza <input>, <select>, ndi <textarea>zinthu.
Bootstrap imayang'ana :invalidndi :validmasitayelo ku .was-validatedkalasi ya makolo, nthawi zambiri amagwiritsidwa ntchito ku <form>. Kupanda kutero, gawo lililonse lofunikira lopanda mtengo likuwoneka ngati losavomerezeka pamasamba. Mwanjira iyi, mutha kusankha nthawi yoti muyambitse (nthawi zambiri mukayesa kutumiza fomu).
Kuti mukonzenso mawonekedwe a fomuyo (mwachitsanzo, popereka mawonekedwe osinthika pogwiritsa ntchito AJAX), chotsani .was-validatedkalasiyo <form>pambuyo popereka.
Monga kubweza, .is-invalidndipo .is-validmakalasi atha kugwiritsidwa ntchito m'malo mwa pseudo-class kuti atsimikizire mbali ya seva . Safuna .was-validatedkalasi ya makolo.
Chifukwa cha zopinga momwe CSS imagwirira ntchito, sitingathe (pakali pano) kugwiritsa ntchito masitayelo ku <label>omwe amabwera patsogolo pa mawonekedwe mu DOM popanda kuthandizidwa ndi JavaScript.
Asakatuli onse amakono amathandizira API yotsimikizira zoletsa , njira zingapo za JavaScript zotsimikizira kuwongolera mawonekedwe.
Mauthenga oyankha atha kugwiritsa ntchito zosasintha za msakatuli (zosiyana pa msakatuli uliwonse, komanso zosalembedwera kudzera pa CSS) kapena masitayelo athu oyankha omwe ali ndi HTML ndi CSS yowonjezera.
Mutha kupereka mauthenga ovomerezeka ndi setCustomValidityJavaScript.

Poganizira izi, lingalirani ma demo otsatirawa a masitayelo athu otsimikizira mawonekedwe, makalasi osankha pa seva, ndi kusasintha kwa msakatuli.

Masitayelo mwamakonda

Kwa mauthenga otsimikizira mawonekedwe a Bootstrap, muyenera kuwonjezera mawonekedwe a novalidateboolean ku fayilo yanu ya <form>. Izi zimayimitsa zida zosinthira msakatuli, komabe zimapereka mwayi wopeza ma API otsimikizira mu JavaScript. Yesani kutumiza fomu ili pansipa; JavaScript yathu idumpha batani lotumiza ndikutumiza ndemanga kwa inu. Mukayesa kutumiza, muwona mawonekedwe :invalidndi :validmasitayelo akugwiritsidwa ntchito pazowongolera mafomu anu.

Masitayelo oyankha mwamakonda anu amagwiritsa ntchito mitundu yokhazikika, malire, masitayelo akutsogolo, ndi zithunzi zakumbuyo kuti athe kulumikizana bwino ndi mayankho. Zithunzi zakumbuyo za <select>s zimapezeka ndi .form-select, osati .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)
    })
})()

Zosasintha za msakatuli

Simukufuna kumva mauthenga otsimikizira kapena kulemba JavaScript kuti musinthe machitidwe? Zabwino zonse, mutha kugwiritsa ntchito osasintha osatsegula. Yesani kutumiza fomu ili pansipa. Kutengera msakatuli wanu ndi OS, muwona mayankho osiyanasiyana.

Ngakhale masitayelo oyankhawa sangalembedwe ndi CSS, mutha kusinthanso zolemba zanu kudzera mu 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>

Mbali ya seva

Tikukulimbikitsani kugwiritsa ntchito kutsimikizira kwa kasitomala, koma ngati mukufuna kutsimikizira mbali ya seva, mutha kuwonetsa magawo omwe ali olakwika komanso ovomerezeka .is-invalidndi .is-valid. Dziwani kuti .invalid-feedbackamathandizidwanso ndi makalasi awa.

Pazigawo zosavomerezeka, onetsetsani kuti ndemanga yolakwika/uthenga wolakwika ukulumikizidwa ndi gawo loyenera la fomu pogwiritsa ntchito aria-describedby(pozindikira kuti mawonekedwewa amalola kuti oposa amodzi atchulidwe id, ngati gawolo liloza kale ku mawu owonjezera).

Kukonza zovuta ndi malire a radii , magulu olowetsa amafunikira .has-validationkalasi yowonjezera.

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

Zinthu zothandizira

Masitayelo otsimikizira alipo pazowongolera mafomu otsatirawa ndi zigawo zake:

<input>s ndi <textarea>s ndi .form-control(kuphatikiza mpaka m'modzi .form-controlm'magulu olowetsa)
<select>s ndi.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>

Malangizo

Ngati masanjidwe anu amaloleza, mutha kusintha .{valid|invalid}-feedbackmakalasiwo .{valid|invalid}-tooltipkuti awonetse mayankho otsimikizira mu chida cholembedwa. Onetsetsani kuti muli ndi kholo lomwe lili ndi position: relativechida chothandizira. Muchitsanzo chomwe chili pansipa, makalasi athu ali ndi izi kale, koma polojekiti yanu ingafunike kukhazikitsidwa kwina.

<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

Zosintha

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

Zosakaniza

Zosakaniza ziwiri zimaphatikizidwa palimodzi, kudzera mu loop yathu , kuti tipange masitaelo athu otsimikizira mawonekedwe.

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

Mapu

Awa ndiye mapu otsimikizira a Sass ochokera ku _variables.scss. Chotsani kapena onjezerani izi kuti mupange zigawo zosiyana kapena zowonjezera.

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

Mapu a $form-validation-statesakhoza kukhala ndi magawo atatu osankhidwa kuti achotse zida ndi masitaelo olunjika.

Lupu

Amagwiritsidwa ntchito mobwerezabwereza $form-validation-statespamapu kuti apange masitaelo athu otsimikizira. Zosintha zilizonse pamapu a Sass omwe ali pamwambawa awonetsedwa mu CSS yanu yopangidwa kudzera pa loop iyi.

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

Kusintha mwamakonda

Mayiko otsimikizira atha kusinthidwa makonda kudzera pa Sass ndi $form-validation-statesmapu. Zopezeka mufayilo yathu _variables.scss, mapu a Sass ndi momwe timapangira zokhazikika valid/ invalidzovomerezeka. Kuphatikizidwa ndi mapu okhazikitsidwa kuti musinthe mtundu wa dziko lililonse, chithunzi, mtundu wa zida, ndi mithunzi yolunjika. Ngakhale kuti palibe mayiko ena omwe amathandizidwa ndi asakatuli, omwe amagwiritsa ntchito masitayelo azokonda amatha kuwonjezera mayankho ovuta kwambiri.

Chonde dziwani kuti sitikulangiza kusintha makonda $form-validation-statespopanda kusinthanso form-validation-statemixin .