Okukakasa

Okuwa endowooza ez’omuwendo, ezisobola okukolebwako eri abakozesa bo n’okukakasa foomu ya HTML5, ng’oyita mu nneeyisa za bbulawuzi ezisookerwako oba emisono egy’ennono ne JavaScript.

Ku muko guno

Tukimanyi nti mu kiseera kino emisono gy’okukakasa egy’ennono egy’oludda lwa kasitoma n’obukodyo bw’ebikozesebwa tebituukirirwa, okuva bwe kiri nti tebikwatibwa tekinologiya ayamba. Nga tukola ku solution, twandikuwadde amagezi okukozesa enkola ya server-side oba enkola ya default browser validation.

Engeri gye kikola

Laba engeri okukakasa foomu gye kukola ne Bootstrap:

Okukakasa foomu ya HTML kukozesebwa okuyita mu CSS's two pseudo-classes, :invalidne :valid. Kikwata ku <input>, <select>, ne <textarea>elementi.
Bootstrap scopes the :invalidne :validstyles ku kiraasi y'omuzadde .was-validated, ebiseera ebisinga ekozesebwa ku <form>. Bwe kitaba ekyo, ennimiro yonna eyeetaagisa nga tewali muwendo eraga nga si ntuufu ku kutikka omuko. Mu ngeri eno, oyinza okusalawo ddi lw’ogenda okuzikola (ebiseera ebisinga oluvannyuma lw’okugezaako okuleeta foomu).
Okuddamu okuteekawo endabika ya foomu (okugeza, mu mbeera y’okuweereza foomu okukyukakyuka nga okozesa AJAX), ggyawo .was-validatedekibiina okuva mu <form>nate oluvannyuma lw’okuweereza.
Nga fallback, .is-invalidera .is-validclasses ziyinza okukozesebwa mu kifo kya pseudo-classes for server-side validation . Tezeetaaga .was-validatedkibiina kya bazadde.
Olw'ebizibu mu ngeri CSS gy'ekola, tetusobola (mu kiseera kino) kukozesa sitayiro ku a <label>ejja nga tennabaawo kufuga ffoomu mu DOM awatali buyambi bwa JavaScript eya bulijjo.
Browser zonna ez’omulembe ziwagira constraint validation API , omuddirirwa gw’enkola za JavaScript ez’okukakasa ebifuga foomu.
Obubaka bw’okuddamu buyinza okukozesa ebisookerwako bya bbulawuzi (eby’enjawulo ku buli bbulawuzi, era nga tebiyinza kukolebwa nga biyita mu CSS) oba emisono gyaffe egy’okuddamu egy’ennono nga giriko HTML ne CSS ez’enjawulo.
Oyinza okuwa obubaka obw'obutuufu obw'ennono ne setCustomValiditymu JavaScript.

Nga olina ekyo mu birowoozo, lowooza ku demos zino wammanga ez’emisono gyaffe egy’okukakasa foomu egy’ennono, kiraasi z’oludda lwa seva ez’okwesalirawo, n’ebisookerwako bya bbulawuzi.

Emisono egy’enjawulo

Ku bubaka obw'okukakasa foomu ya Bootstrap eya bulijjo, ojja kwetaaga okwongerako ekintu kya novalidateboolean ku <form>. Kino kiremesa ebikozesebwa eby'okuddamu ebisookerwako ebya bbulawuzi, naye nga kikyawa olukusa ku API z'okukakasa foomu mu JavaScript. Gezaako okuleeta foomu eno wammanga; JavaScript yaffe ejja kukwata button y'okuweereza n'okukuweereza endowooza yo. Bw’oba ogezaako okuleeta, ojja kulaba :invalidne :validsitayiro nga zikozesebwa ku bifuga foomu yo.

Emisono gy’okuddamu egy’enjawulo gikozesa langi ez’enjawulo, ensalosalo, emisono gy’okussa essira, n’ebifaananyi eby’emabega okusobola okuwuliziganya obulungi ebiteeso. Ebifaananyi eby'emabega ebya <select>s bifunibwa ne .form-select, so si .form-control.

html

<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)
  })
})()

Browser esookera ddala

Tofaayo ku bubaka bw'okuddamu okukakasa obw'ennono oba okuwandiika JavaScript okukyusa enneeyisa za ffoomu? Byonna birungi, osobola okukozesa browser defaults. Gezaako okuleeta foomu eno wammanga. Okusinziira ku browser yo ne OS, ojja kulaba sitayiro ey’enjawulo katono ey’okuddamu.

Wadde nga emisono gino egy'okuddamu tegisobola kukola sitayiro na CSS, okyayinza okulongoosa ebiwandiiko by'okuddamu okuyita mu JavaScript.

html

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

Oludda lwa seeva

Tukuwa amagezi okukozesa okukakasa ku ludda lwa kasitoma, naye mu mbeera nga weetaaga okukakasa ku ludda lwa seva, osobola okulaga ennimiro za foomu ezitali ntuufu era entuufu ne .is-invalidne .is-valid. Weetegereze nti .invalid-feedbacknakyo kiwagirwa ne kiraasi zino.

Ku nnimiro ezitali ntuufu, kakasa nti obubaka obutali butuufu obw'okuddamu/ensobi bukwatagana n'ennimiro ya foomu ekwatagana ng'okozesa aria-describedby(wetegereze nti ekintu kino kikkiriza ebisukka mu kimu idokujulizibwa, singa ennimiro esonga dda ku biwandiiko bya foomu eby'enjawulo).

Okutereeza ensonga ne border radius.has-validation , ebibinja by'okuyingiza byetaaga kiraasi ey'okugattako .

html

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

Ebintu ebiwagirwa

Emisono gy'okukakasa giriwo ku bifuga n'ebitundu bya foomu bino wammanga:

<input>s ne <textarea>s nga mulimu .form-control(nga mw’otwalidde n’okutuuka ku kimu .form-controlmu bibinja by’ebiyingizibwa) .
<select>s nga balina.form-select
.form-checks

html

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

Ebikozesebwa

Singa ensengeka ya foomu yo ekkiriza, osobola okukyusakyusa .{valid|invalid}-feedbackkiraasi ne .{valid|invalid}-tooltipkiraasi okulaga ebiteeso by’okukakasa mu kigambo ky’ebikozesebwa ekiriko sitayiro. Kakasa nti olina omuzadde alina position: relativeku yo for tooltip positioning. Mu kyokulabirako wansi, kiraasi zaffe ez’ennyiriri kino zirina dda, naye pulojekiti yo eyinza okwetaaga okuteekawo okulala.

html

<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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Ebirungo ebitabuddwa

Mixins bbiri zigattibwa wamu, okuyita mu loopu yaffe , okukola emisono gyaffe egy’okuddamu okukakasa foomu.

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

Maapu

Eno ye maapu ya Sass ekakasa okuva mu _variables.scss. Override oba okugaziya kino okukola embeera ez'enjawulo oba ez'okwongerako.

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

Maapu za $form-validation-stateszisobola okubeeramu parameters ssatu ez'okwesalirawo okusazaamu obukodyo bw'ebikozesebwa n'emisono gy'okussa essira.

Kyabulijo

Ekozesebwa okuddiŋŋana ku $form-validation-statesmiwendo gya maapu okukola emisono gyaffe egy’okukakasa. Enkyukakyuka zonna ku maapu ya Sass waggulu ejja kweyolekera mu CSS yo ekung’aanyiziddwa ng’oyita mu loopu eno.

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

Okulongoosa

Embeera z'okukakasa zisobola okulongoosebwa nga ziyita mu Sass ne $form-validation-statesmaapu. Esangibwa mu _variables.scssfayiro yaffe, maapu eno eya Sass y’engeri gye tukolamu embeera ezisookerwako valid/ invalidez’okukakasa. Mulimu maapu eteekeddwa mu kisenge okulongoosa langi ya buli ssaza, akabonero, langi y’ekintu ekikozesebwa, n’ekisiikirize ky’okussa essira. Wadde nga tewali masaza malala gawagirwa bbulawuzi, abo abakozesa emisono egy’enjawulo basobola bulungi okwongerako ebiteeso bya ffoomu ebizibu ennyo.