Ankündigung

Einklappen
Keine Ankündigung bisher.

Inputfield in Bootstrap prüfen - Icon soll nicht angezeigt werden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Inputfield in Bootstrap prüfen - Icon soll nicht angezeigt werden

    Hallo zusammen,

    ich arbeite grade mit Bootstrap.
    Ich habe ein Formular mit Textfeldern. Beim Absenden vom Formular wird geprüft, ob Text in die Felder eingetragen wurde oder nicht.

    Code:
     <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>
    Code:
     // Example starter JavaScript for disabling form submissions if there are invalid fields (function () {   'use strict'    // Fetch all the forms we want to apply custom Bootstrap validation styles to   var forms = document.querySelectorAll('.needs-validation')    // Loop over them and prevent submission   Array.prototype.slice.call(forms)     .forEach(function (form) {       form.addEventListener('submit', function (event) {         if (!form.checkValidity()) {           event.preventDefault()           event.stopPropagation()         }          form.classList.add('was-validated')       }, false)     }) })()
    Link: https://getbootstrap.com/docs/5.0/fo...n/#customizing


    Ich würde gerne die Icons, die er mir in den Textfeldern anzeigt, ausblenden. Es soll lediglich der rote oder grüne Rahmen angezeigt werden.
    Weiß einer wie ich das umsetzen kann? Freue mich über Hilfe.


  • #2
    Da ich BS nicht verwende, habe ich da jetzt nicht drauf gesehen, aber das solltest Du über CSS lösen können.
    Schau nach den CSS-Klassen der Eingabefelder und deren Container.
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

    Kommentar


    • #3
      Mit F12 gelangst du in die Browser tools, da solltest sich das raus finden lassen.
      Im Übrigen solltest du den Code hier immer formatiert präsentieren(ohne horiz. Scroll.), wenn du willst das sich das jemand anschaut, ich habe es nicht gemacht.

      Kommentar

      Lädt...
      X