Xaqiijinta

U sii jawaab celin qiimo leh, la shaqayn karo isticmaaleyaashaada qaab HTML5, iyada oo loo marayo habdhaqanka browserka caadiga ah ama qaababka gaarka ah iyo JavaScript.

Boggan

Waxaan la soconaa in aan hadda la heli karin qaababka ansaxinta caadadii ee dhinaca macmiilka iyo qalabyada, maadaama aysan la kulmin tignoolajiyada caawinta. Inta aan xalka ka shaqeyneyno, waxaan ku talineynaa in la isticmaalo ikhtiyaarka dhinaca server-ka ama habka ansaxinta browserka caadiga ah.

Sida ay u shaqeyso

Waa kan sida xaqiijinta foomku ula shaqeyso Bootstrap:

Xaqiijinta foomka HTML waxa lagu dabaqaa labada fasal ee been abuurka ah ee CSS, :invalidiyo :valid. Waxay qusaysaa <input>, <select>, iyo <textarea>curiyayaasha.
Bootstrap waxay u kala xadaynaysaa :invalidiyo :validqaababka .was-validatedfasalka waalidka, oo badanaa lagu dabaqo <form>. Haddii kale, goob kasta oo loo baahan yahay oo aan qiimo lahayn ayaa u muuqata mid aan sax ahayn oo ku jirta culayska bogga. Sidan, waxaad dooran kartaa goorta aad dhaqaajinayso (sida caadiga ah ka dib marka la isku dayo soo gudbinta foomka).
Si dib loogu habeeyo muuqaalka foomka (tusaale ahaan, xaalada soo gudbinta foom firfircoon oo la isticmaalayo AJAX), ka saar .was-validatedfasalka <form>mar labaad soo gudbinta ka dib.
Dib-u-dhac ahaan, .is-invalidiyo .is-validfasallada waxaa loo isticmaali karaa halkii laga isticmaali lahaa fasallada been-abuurka ah ee xaqiijinta dhinaca server-ka . Uma baahna .was-validatedfasalka waalidka.
Caqabadaha ku jira sida CSS u shaqeyso awgeed, ma awoodno (hadda) ku dabaqi karno qaababka <label>ka hor inta aan la xakameynin foomka DOM iyada oo aan la helin caawimaad JavaScript caadiga ah.
Dhammaan daalacashada casriga ah waxay taageeraan ansaxinta xannibaadda API , taxane ah hababka JavaScript ee lagu xaqiijinayo kontaroolada foomka.
Farimaha dib -u-celinta waxa laga yaabaa inay ka faa'iidaysato khaladka browserka (ka duwan biraawsar kasta, iyo mid aan habayn CSS) ama hababkayada jawaab celinta caadada oo leh HTML iyo CSS dheeraad ah.
Waxaad ku siin kartaa farriimaha ansaxnimada gaarka ah setCustomValidityee JavaScript.

Iyadoo taas maskaxda lagu hayo, ka fiirso bandhigyadan soo socda ee qaababka ansixinta qaabka caadiga ah, fasallada dhinaca server-ka ee ikhtiyaarka ah, iyo cilladaha browserka.

Hababka gaarka ah

Farriimaha xaqiijinta foomka Bootstrap caadadii, waxaad u baahan doontaa inaad ku darto novalidatesifada booleankaaga <form>. Tani waxay curyaamisaa aaladaha jawaab celinta caadiga ah ee biraawsarka, laakiin wali waxay siisaa gelitaanka API-yada ansaxinta foomka JavaScript. Isku day inaad gudbiso foomka hoose; JavaScript-kayaga ayaa kaa joojin doona badhanka soo gudbinta oo ku soo gudbin doona jawaab celinta. Markaad isku daydo inaad soo gudbiso, waxaad arki doontaa :invalidiyo :validqaababka lagu dabaqay kontaroolada foomkaaga.

Hababka warcelinta gaarka ah waxay adeegsadaan midabada gaarka ah, xuduudaha, qaababka diirada, iyo astaanta asalka si ay si wanagsan ugu gudbiyaan jawaab celinta. Astaamaha asalka ah ee <select>s waxaa lagu heli karaa oo keliya .form-select, ee lama heli karo .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-ka khaladka ah

Ma xiisaynayso fariimaha jawaab celinta ansixinta caadada ah ama qorista JavaScript si aad u bedesho habdhaqanka foomka? Wax kasta oo wanaagsan, waxaad isticmaali kartaa browser-ka caadiga ah. Isku day inaad soo gudbiso foomka hoose. Iyada oo ku xidhan biraawsarkaaga iyo OS-kaaga, waxaad arki doontaa qaab jawaab celin ka duwan.

Iyadoo qaababkan jawaab celinta aan lagu qaabayn karin CSS, waxaad weli ku habeyn kartaa qoraalka jawaab celinta 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>

Dhinaca server-ka

Waxaan kugula talineynaa isticmaalka ansaxinta dhinaca macmiilka, laakiin haddii ay dhacdo inaad u baahato ansaxinta dhinaca server-ka, waxaad muujin kartaa foom aan sax ahayn oo ansax ah oo leh .is-invalidiyo .is-valid. Ogow in .invalid-feedbacksidoo kale lagu taageeray fasaladan.

Goobaha aan sax ahayn, hubi in jawaab celinta khaldan/fariinta khaladka ah ay la xiriirto goobta foomamka ku habboon iyadoo la adeegsanayo aria-describedby(iyagoo ogaanaya in sifadani ay u oggolaanayso in ka badan hal idin la tixraaco, haddii goobta ay mar hore farta ku fiiqdo qoraal foom dheeraad ah).

Si loo xalliyo arrimaha ku saabsan raadiyaha xuduudka , kooxaha wax gelinta waxay u baahan yihiin .has-validationfasal dheeraad ah.

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>

Curiyayaasha la taageeray

Qaababka xaqiijinta ayaa diyaar u ah kontaroolada iyo qaybaha soo socda:

<input>s iyo <textarea>s leh .form-control(ay ku jiraan ilaa mid ka mid .form-controlah kooxaha wax gelinta)
<select>leh.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>

Tilmaamaha Qalabka

Haddii qaabka qaabkaagu kuu ogolaado, waxaad u bedeli kartaa .{valid|invalid}-feedbackfasalada .{valid|invalid}-tooltipfasalada si aad u muujiso jawaab celinta ansaxinta qalab habaysan. Hubi inaad haysato waalid position: relativeku yaal meelaynta qalabaynta. Tusaalaha hoose, fasaladayada tiirarka ayaa tan hore u lahaa, laakiin mashruucaagu waxa uu u baahan karaa hab kale.

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

Kala duwanaansho

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

Isku qas

Laba isku-dar ah ayaa la isku daraa, iyada oo loo marayo wareeggayaga , si loo soo saaro qaababka jawaab celinta xaqiijinta foomka.

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

Maab

Kani waa khariidadda Sass ee ansaxinta _variables.scss. Tirtir ama kordhi tan si aad u abuurto gobolo kala duwan ama dheeraad ah.

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

Khariidadaha $form-validation-stateswaxay ka koobnaan karaan saddex cabbir oo ikhtiyaari ah si ay meesha uga saaraan tibaaxaha qalabka iyo qaababka diiradda.

Loop

Loo isticmaalo in lagu $form-validation-statesqiyaaso qiyamka khariidada si loo soo saaro qaababka ansixintayada. Wax ka bedel kasta oo lagu sameeyo khariidadda Sass ee kore waxay ka muuqan doontaa CSS-gaaga la soo ururiyey iyadoo loo marayo wareeggan.

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

Habaynta

Gobolada xaqiijinta waxa lagu habeyn karaa Sass oo leh $form-validation-stateskhariidad. Ku yaal _variables.scssfaylkayaga, khariidaddan Sass waa sida aan u soo saarno xaaladaha caadiga ah valid/ invalidansaxinta. Waxaa ku jira khariidad buul leh oo loogu talagalay in lagu habeeyo midabka gobol kasta, astaanta, midabka aaladda, iyo hooska diiradda. Iyadoo aanay jirin dawlado kale oo ay taageerayaan daalacashada, kuwa isticmaalaya qaababka caadiga ah waxay si fudud ugu dari karaan jawaab celin foom oo adag.