Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

Validation tih a ni

HTML5 form validation hmangin i hmangtute hnenah feedback hlu tak, actionable tak pe la, browser default behavior emaw custom style leh JavaScript hmangin pe rawh.

He page ah hian
Tunah hian client-side custom validation style leh tooltips te hi assistive technology hmanga inhmang an nih loh avangin hman theih a ni lo tih kan hria. Solution kan siam lai hian server-side option emaw default browser validation method emaw hmang turin kan rawt ang.

A hnathawh dan

Bootstrap hmanga form validation hnathawh dan chu hetiang hi a ni:

  • HTML form validation hi CSS-a pseudo-classes pahnih hmangin hman a ni a, :invalidleh :valid. <input>, <select>, leh <textarea>element- ah te a hman theih .
  • Bootstrap hian :invalidleh :validstyles te chu parent .was-validatedclass ah a scope a, a tlangpuiin <form>. Chutiang a nih loh chuan value nei lo field mamawh apiang chu page load-ah a dik lo angin a lang. Chutiang chuan engtikah nge activate tur tih i thlang thei ang (a tlangpuiin form thehluh tum hnuah).
  • Form hmel reset tur chuan (entir nan, AJAX hmanga dynamic form submission a nih chuan), submission hnua again .was-validatedatang chuan class chu paih chhuak rawh.<form>
  • Fallback angin, .is-invalidleh server-side validation.is-valid atan pseudo-classes aiah class hman theih a ni . Nu leh pa class an mamawh lo ..was-validated
  • CSS hnathawh danah harsatna a awm avangin (tunah chuan) <label>DOM-a form control hmaa lo awm a chu custom JavaScript puihna tel lovin style kan hmang thei lo.
  • Tunlai browser zawng zawng hian constraint validation API , form controls validate nana JavaScript method hrang hrang an support a.
  • Feedback message-ah hian browser default (browser tin tan a danglam, CSS hmanga style theih loh) emaw, HTML leh CSS dang nena kan custom feedback style emaw a hmang thei bawk.
  • setCustomValidityJavaScript hmangin custom validity message i pe thei bawk.

Chu chu ngaihtuah chungin, kan custom form validation styles, optional server-side classes, leh browser defaults te tana a hnuaia demos te hi ngaihtuah la.

Custom style hrang hrang a awm bawk

Custom Bootstrap form validation message atan chuan novalidateboolean attribute chu i <form>. Hei hian browser default feedback tooltips te chu a titawp a, mahse JavaScript-a form validation API te chu a la lut thei tho. A hnuaia form hi thehluh tum ang che; kan JavaScript chuan submit button chu a intercept ang a, feedback a relay ang che. Submit i tum hian i form controls-a :invalidand styles hman dan i hmu ang.:valid

Custom feedback style-ah chuan feedback inhrilh tawnna tha zawk neih theih nan custom color, border, focus style leh background icon te a hmang thin. Background icons for <select>s hi .form-select, nen chauh a awm a, .form-control.

A tha hle mai!
A tha hle mai!
@ a ni.
Khawngaihin username pakhat thlang rawh.
Khawpui dik tak min pe dawn nia.
Khawngaihin state dik tak thlang rawh.
Zip dik tak pe turin kan ngen a che u.
Submit hmain i remti tur a ni.
html tih a ni 
<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 a default a ni

Custom validation feedback message emaw, form behavior thlak danglam tur JavaScript ziah emaw duh lo em ni? All good, browser defaults te pawh i hmang thei bawk. A hnuaia form hi submit tum ang che. I browser leh OS a zirin feedback style danglam deuh deuh i hmu ang.

Heng feedback style te hi CSS hmanga style theih a nih loh laiin, JavaScript hmangin feedback text chu i siam danglam thei tho.

@ a ni.
html tih a ni 
<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>

Server lam a ni

Client-side validation hman kan rawt a, mahse server-side validation i mamawh a nih chuan form field dik lo leh dik lo chu leh hmangin i tarlang thei .is-invalidang .is-valid. .invalid-feedbackHeng class te nen hian a support bawk tih hre reng ang che .

Field dik lo tan chuan feedback/error message dik lo chu form field nena inzawm a nih leh nih loh enfiah rawh aria-describedby(he attribute hian pakhat aia tam idreference theihna a siam tih hre reng ang che, field chuan form text dang a kawhhmuh tawh a nih chuan).

Border radius -a harsatna awmte siam\hat nan input group -ah chuan .has-validationclass dang a ngai a ni.

A tha hle mai!
A tha hle mai!
@ a ni.
Khawngaihin username pakhat thlang rawh.
Khawpui dik tak min pe dawn nia.
Khawngaihin state dik tak thlang rawh.
Zip dik tak pe turin kan ngen a che u.
Submit hmain i remti tur a ni.
html tih a ni 
<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>

Element thlawptu te

A hnuaia form control leh component hrang hrangte tan hian validation style a awm a:

  • <input>s leh <textarea>s with ( input group- .form-controla pakhat thleng tel ) ..form-control
  • <select>s nen.form-select
  • .form-checks
Textarea ah hian message ziak la.
Entirna feedback text dik lo
Entirna tam zawk feedback text dik lo
Entirna dik lo select feedback
Entirnan form file feedback dik lo
html tih a ni 
<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>

Hmanraw hman dan tur

I form layout-in a phal chuan, styled tooltip-a validation feedback lantir turin class-te .{valid|invalid}-feedbackchu class-te nen i swap thei ang. Tooltip positioning atan .{valid|invalid}-tooltipnu leh pa nei ngei ngei tur a ni. position: relativeA hnuaia entirnan hian kan column class te hian hei hi an nei tawh a, mahse i project hian setup dang a mamawh mai thei.

A tha hle mai!
A tha hle mai!
@ a ni.
Khawngaihin username danglam leh dik tak thlang rawh.
Khawpui dik tak min pe dawn nia.
Khawngaihin state dik tak thlang rawh.
Zip dik tak pe turin kan ngen a che u.
html tih a ni 
<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 a ni

Variables te pawh a awm

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

Mixins te a awm

Mixin pahnih kan inzawm khawm a, kan loop hmangin kan form validation feedback styles te kan siam chhuak a.

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

Map a ni

Hei hi validation Sass map atanga lak chhuah _variables.scssa ni. Hei hi override emaw extend emaw la, state hrang hrang emaw additional emaw siam rawh.

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

Maps of $form-validation-stateshian tooltips leh focus styles override theihna tur optional parameter pathum a nei thei.

Suih

$form-validation-statesKan validation style siam nan map value chunga iterate nan hman thin . A chunga Sass map-a siam danglamna awm apiang chu he loop hmang hian i compile CSS-ah a lang ang.

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

Customizing a ni

Validation state te chu Sass hmangin $form-validation-statesmap nen customize theih a ni. Kan _variables.scssfile-a awm, he Sass map hi default valid/ invalidvalidation states kan siam dan a ni. State tinte color, icon, tooltip color, leh focus shadow te siam dan tur nested map a awm bawk. State dang browser-in a support loh laiin, custom style hmangtute chuan awlsam takin form feedback complex zawk an dah belh thei a ni.