מַתַן תוֹקֵף

ספק למשתמשים שלך משוב בעל ערך וניתן לפעולה באמצעות אימות טופס HTML5, באמצעות התנהגויות ברירת מחדל של דפדפן או סגנונות מותאמים אישית ו-JavaScript.

בעמוד זה

אנו מודעים לכך שכרגע סגנונות האימות המותאמים אישית וטיפים הכלים של צד הלקוח אינם נגישים, מכיוון שהם אינם חשופים לטכנולוגיות מסייעות. בזמן שאנו עובדים על פתרון, אנו ממליצים להשתמש באפשרות בצד השרת או בשיטת ברירת המחדל של אימות הדפדפן.

איך זה עובד

כך עובד אימות טופס עם Bootstrap:

אימות טופס HTML מיושם באמצעות שתי מחלקות פסאודו של CSS, :invalidו- :valid. זה חל על <input>, <select>, <textarea>ואלמנטים.
Bootstrap מקיף את ה- :invalidand :validסגנונות .was-validatedלמחלקה אב, בדרך כלל מיושם על ה- <form>. אחרת, כל שדה חובה ללא ערך יופיע כלא חוקי בעת טעינת העמוד. בדרך זו, תוכל לבחור מתי להפעיל אותם (בדרך כלל לאחר ניסיון שליחת טופס).
כדי לאפס את מראה הטופס (לדוגמה, במקרה של הגשת טופס דינמי באמצעות AJAX), הסר את .was-validatedהמחלקה מהמחלקה <form>שוב לאחר ההגשה.
כחלופה, .is-invalidוניתן .is-validלהשתמש במחלקות במקום הפסאודו-מחלקות לצורך אימות בצד השרת . הם אינם דורשים .was-validatedכיתת הורים.
בשל אילוצים באופן שבו עובד CSS, איננו יכולים (נכון לעכשיו) להחיל סגנונות על a <label>שמגיע לפני פקד טופס ב-DOM ללא עזרה של JavaScript מותאם אישית.
כל הדפדפנים המודרניים תומכים ב- API של אימות אילוץ , סדרה של שיטות JavaScript לאימות פקדי טופס.
הודעות משוב עשויות להשתמש בברירות המחדל של הדפדפן (שונות עבור כל דפדפן, ואינן ניתנות לעיצוב באמצעות CSS) או בסגנונות המשוב המותאמים אישית שלנו עם HTML ו-CSS נוספים.
אתה יכול לספק הודעות תוקף מותאמות אישית setCustomValidityב-JavaScript.

עם זאת בחשבון, שקול את ההדגמות הבאות עבור סגנונות אימות הטפסים המותאמים אישית שלנו, מחלקות אופציונליות בצד השרת וברירות מחדל של הדפדפן.

סגנונות מותאמים אישית

עבור הודעות אימות טופס Bootstrap מותאמות אישית, תצטרך להוסיף את novalidateהתכונה הבוליאנית שלך <form>. פעולה זו משביתה את ברירת המחדל של עצות המשוב של הדפדפן, אך עדיין מספקת גישה לממשקי API לאימות הטופס ב-JavaScript. נסה לשלוח את הטופס למטה; ה-JavaScript שלנו יירט את כפתור השליחה ויעביר אליך משוב. כשתנסה לשלוח, תראה את הסגנונות :invalidוהסגנונות :validשהוחלו על פקדי הטפסים שלך.

סגנונות משוב מותאמים אישית מיישמים צבעים מותאמים אישית, גבולות, סגנונות מיקוד וסמלי רקע כדי להעביר משוב טוב יותר. סמלי רקע עבור <select>s זמינים רק עם .form-select, ולא .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)
  })
})()

ברירת המחדל של הדפדפן

לא מעוניין בהודעות משוב אימות מותאמות אישית או בכתיבת JavaScript כדי לשנות התנהגויות של טופס? הכל בסדר, אתה יכול להשתמש בברירות המחדל של הדפדפן. נסה לשלוח את הטופס למטה. בהתאם לדפדפן ולמערכת ההפעלה שלך, תראה סגנון מעט שונה של משוב.

אמנם לא ניתן לעצב סגנונות משוב אלה עם CSS, אך עדיין תוכל להתאים אישית את טקסט המשוב באמצעות 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>

בצד השרת

אנו ממליצים להשתמש באימות בצד הלקוח, אך במקרה שאתה דורש אימות בצד השרת, אתה יכול לציין שדות טפסים לא חוקיים ותקפים עם .is-invalidו .is-valid. שים לב .invalid-feedbackשנתמך גם בשיעורים אלה.

עבור שדות לא חוקיים, ודא שהמשוב/הודעת השגיאה הלא חוקית משויכת לשדה הטופס הרלוונטי באמצעות aria-describedby(שים לב שתכונה זו מאפשרת idהפניה ליותר מאחד, למקרה שהשדה כבר מצביע על טקסט נוסף בטופס).

כדי לתקן בעיות ברדיוס הגבול , קבוצות קלט דורשות .has-validationמחלקה נוספת.

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>

אלמנטים נתמכים

סגנונות אימות זמינים עבור פקדי הטופס והרכיבים הבאים:

<input>s ו- <textarea>s עם .form-control(כולל עד אחד .form-controlבקבוצות קלט)
<select>s עם.form-select
.form-checkס

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>

עצות כלים

אם פריסת הטופס שלך מאפשרת זאת, אתה יכול להחליף את .{valid|invalid}-feedbackהמחלקות .{valid|invalid}-tooltipלמחלקות כדי להציג משוב אימות בהסבר כלים מעוצב. ודא שיש הורה עם position: relativeעל זה עבור מיקום קצה הכלים. בדוגמה למטה, כיתות העמודות שלנו כבר קיימו את זה, אך ייתכן שהפרויקט שלך ידרוש הגדרה חלופית.

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>

סאס

משתנים

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

מיקסינס

שני מיקסים משולבים יחד, דרך הלולאה שלנו , כדי ליצור את סגנונות המשוב שלנו לאימות טפסים.

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

מַפָּה

זוהי מפת האימות של Sass מ- _variables.scss. עוקף או הרחיב את זה כדי ליצור מצבים שונים או נוספים.

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

מפות של $form-validation-statesיכולות להכיל שלושה פרמטרים אופציונליים לעקוף עצות כלים וסגנונות מיקוד.

לוּלָאָה

משמש לחזרה על $form-validation-statesערכי מפה ליצירת סגנונות האימות שלנו. כל שינוי במפת Sass לעיל יבוא לידי ביטוי ב-CSS הקומפילד שלך דרך הלולאה הזו.

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

התאמה אישית

ניתן להתאים אישית מצבי אימות באמצעות Sass עם $form-validation-statesהמפה. מפה זו של Sass ממוקמת בקובץ שלנו _variables.scssהיא הדרך בה אנו יוצרים את מצבי ברירת המחדל valid/ אימות. invalidכלולה מפה מקוננת להתאמה אישית של הצבע, הסמל, צבע תיאור הכלים וצל המיקוד של כל מדינה. אמנם אין מצבים אחרים שנתמכים על ידי דפדפנים, אבל אלה המשתמשים בסגנונות מותאמים אישית יכולים בקלות להוסיף משוב מורכב יותר על טפסים.