Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
Check
in English

Επικύρωση

Παρέχετε πολύτιμα, πρακτικά σχόλια στους χρήστες σας με επικύρωση φόρμας HTML5, μέσω προεπιλεγμένων συμπεριφορών του προγράμματος περιήγησης ή προσαρμοσμένων στυλ και JavaScript.

Σε αυτήν την σελίδα
Γνωρίζουμε ότι επί του παρόντος τα προσαρμοσμένα στυλ επικύρωσης και οι συμβουλές εργαλείων από την πλευρά του πελάτη δεν είναι προσβάσιμα, καθώς δεν εκτίθενται σε υποστηρικτικές τεχνολογίες. Ενώ εργαζόμαστε πάνω σε μια λύση, θα συνιστούσαμε είτε να χρησιμοποιήσετε την επιλογή από την πλευρά του διακομιστή είτε την προεπιλεγμένη μέθοδο επικύρωσης του προγράμματος περιήγησης.

Πως δουλεύει

Δείτε πώς λειτουργεί η επικύρωση φόρμας με το Bootstrap:

  • Η επικύρωση φόρμας HTML εφαρμόζεται μέσω των δύο ψευδοκλάσεων του CSS :invalidκαι :valid. Ισχύει για <input>, <select>, και <textarea>στοιχεία.
  • Το Bootstrap καλύπτει τα στυλ :invalidκαι :validστη γονική .was-validatedκλάση, που συνήθως εφαρμόζονται στο <form>. Διαφορετικά, οποιοδήποτε απαιτούμενο πεδίο χωρίς τιμή εμφανίζεται ως μη έγκυρο κατά τη φόρτωση της σελίδας. Με αυτόν τον τρόπο, μπορείτε να επιλέξετε πότε θα τα ενεργοποιήσετε (συνήθως μετά την απόπειρα υποβολής φόρμας).
  • Για να επαναφέρετε την εμφάνιση της φόρμας (για παράδειγμα, στην περίπτωση υποβολών δυναμικής φόρμας με χρήση AJAX), αφαιρέστε την .was-validatedκλάση από την <form>ξανά μετά την υποβολή.
  • Ως εναλλακτική λύση, .is-invalidκαι οι .is-validκλάσεις μπορούν να χρησιμοποιηθούν αντί για τις ψευδο-κλάσεις για επικύρωση από την πλευρά του διακομιστή . Δεν απαιτούν .was-validatedτάξη γονέα.
  • Λόγω περιορισμών στον τρόπο λειτουργίας του CSS, δεν μπορούμε (προς το παρόν) να εφαρμόσουμε στυλ σε ένα <label>που βρίσκεται πριν από ένα στοιχείο ελέγχου φόρμας στο DOM χωρίς τη βοήθεια προσαρμοσμένης JavaScript.
  • Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το API επικύρωσης περιορισμών , μια σειρά μεθόδων JavaScript για την επικύρωση στοιχείων ελέγχου φορμών.
  • Τα μηνύματα σχολίων ενδέχεται να χρησιμοποιούν τις προεπιλογές του προγράμματος περιήγησης (διαφορετικές για κάθε πρόγραμμα περιήγησης και χωρίς στυλ μέσω CSS) ή τα προσαρμοσμένα στυλ σχολίων μας με επιπλέον HTML και CSS.
  • Μπορείτε να παρέχετε προσαρμοσμένα μηνύματα εγκυρότητας setCustomValidityσε JavaScript.

Έχοντας αυτό υπόψη, εξετάστε τις ακόλουθες επιδείξεις για τα προσαρμοσμένα στυλ επικύρωσης φόρμας, τις προαιρετικές κλάσεις από την πλευρά του διακομιστή και τις προεπιλογές του προγράμματος περιήγησης.

Προσαρμοσμένα στυλ

Για προσαρμοσμένα μηνύματα επικύρωσης φόρμας Bootstrap, θα πρέπει να προσθέσετε το novalidateχαρακτηριστικό boolean στο <form>. Αυτό απενεργοποιεί τις προεπιλεγμένες συμβουλές εργαλείων σχολίων του προγράμματος περιήγησης, αλλά εξακολουθεί να παρέχει πρόσβαση στα API επικύρωσης φορμών στο JavaScript. Προσπαθήστε να υποβάλετε την παρακάτω φόρμα. Η JavaScript μας θα παρεμποδίσει το κουμπί υποβολής και θα σας μεταδώσει σχόλια. Όταν προσπαθείτε να υποβάλετε, θα δείτε τα στυλ :invalidκαι που εφαρμόζονται στα στοιχεία ελέγχου της φόρμας σας.:valid

Τα προσαρμοσμένα στυλ σχολίων εφαρμόζουν προσαρμοσμένα χρώματα, περιγράμματα, στυλ εστίασης και εικονίδια φόντου για καλύτερη επικοινωνία των σχολίων. Τα εικονίδια φόντου για <select>s είναι διαθέσιμα μόνο με .form-selectκαι όχι .form-control.

Φαίνεται καλό!
Φαίνεται καλό!
@
Επιλέξτε ένα όνομα χρήστη.
Καταχωρίστε μια έγκυρη πόλη.
Επιλέξτε μια έγκυρη κατάσταση.
Δώστε ένα έγκυρο zip.
Πρέπει να συμφωνήσετε πριν την υποβολή.
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κλάση.

Φαίνεται καλό!
Φαίνεται καλό!
@
Επιλέξτε ένα όνομα χρήστη.
Καταχωρίστε μια έγκυρη πόλη.
Επιλέξτε μια έγκυρη κατάσταση.
Δώστε ένα έγκυρο zip.
Πρέπει να συμφωνήσετε πριν την υποβολή.
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για την τοποθέτηση της συμβουλής εργαλείου. Στο παρακάτω παράδειγμα, οι τάξεις στηλών μας το έχουν ήδη, αλλά το έργο σας μπορεί να απαιτεί μια εναλλακτική ρύθμιση.

Φαίνεται καλό!
Φαίνεται καλό!
@
Επιλέξτε ένα μοναδικό και έγκυρο όνομα χρήστη.
Καταχωρίστε μια έγκυρη πόλη.
Επιλέξτε μια έγκυρη κατάσταση.
Δώστε ένα έγκυρο zip.
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

Μεταβλητές

$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 συνδυάζονται μαζί, μέσω του βρόχου μας , για να δημιουργήσουν τα στυλ ανατροφοδότησης επικύρωσης φόρμας.

@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χάρτη. _variables.scssΑυτός ο χάρτης Sass, που βρίσκεται στο αρχείο μας , είναι ο τρόπος με τον οποίο δημιουργούμε τις προεπιλεγμένες καταστάσεις valid/ invalidκαταστάσεις επικύρωσης. Περιλαμβάνεται ένας ένθετος χάρτης για την προσαρμογή του χρώματος, του εικονιδίου, του χρώματος συμβουλής εργαλείου και της σκιάς εστίασης κάθε κατάστασης. Αν και καμία άλλη κατάσταση δεν υποστηρίζεται από προγράμματα περιήγησης, όσοι χρησιμοποιούν προσαρμοσμένα στυλ μπορούν εύκολα να προσθέσουν σχόλια πιο περίπλοκης φόρμας.