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.
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.
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) }) })()
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.
Kommentar