Bootstrap Validierung mit XMLHttpRequest verbinden

[BodyLAB]

Hallo zusammen,

ich versuche gerade die Validierung von Bootstrap 5 mit einem XMLHttpRequest zu verbinden und es klappt einfach nicht!
Zum einen verstehe ich derzeit auch leider nicht so wirklich wie das mit der Validierung Funktioniert doch das soll hier nicht das Thema sein 🙃.

Ich habe ein Modal das ich gerne Validieren möchte und später zum Server die Daten mithilfe von XMLHttpRequest übertragen möchte. Das Modal sieht wie folgt aus:

<div class="modal fade" tabindex="-1" aria-labelledby="ModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Hinzufügen</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="row g-3 needs-validation" novalidate>
                    <div class="col-md-6">
                        <label for="validationCustom03" class="form-label">Vereinsname:</label>
                        <input type="text" class="form-control" id="name" required>
                        <div class="invalid-feedback">
                            Please provide a valid city.
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="validationCustom03" class="form-label">E-Mail:</label>
                        <input type="text" class="form-control" id="email" required>
                        <div class="invalid-feedback">
                            Please provide a valid city.
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" class="buttonDefault" type="submit">Senden</button>
            </div>
            </form>
        </div>
    </div>
</div>

Nun habe ich folgenden Code von Bootstrap Kopiert und mit meiner Funktion versucht zu erweitern. Doch wieso auch immer werden keine Daten an den Server gesendet!

<script>
(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()
                } else {
                    speichern();
                }
                form.classList.add('was-validated')
            }, false)
        })
})()

function speichern() {
    let form_data = new FormData();
    form_data.append("name", $("#name").val());
    form_data.append("email", $("#email").val());

    let ajax_request = new XMLHttpRequest();
    ajax_request.open("POST", ".../v1/hinzufuegen");
    ajax_request.send(form_data);
   
}
</script>

Den Code verstehe ich wie oben bereits geschrieben eh nicht so wirklich :-(!!!

Kennt sich jemand damit zufällig aus und kann mir weiterhelfen?

Grüße

 

[itsbeeroclock]

Vereinsname: ... <div class="invalid-feedback"> Please provide a valid city. </div>

🧐

 

[Oneixee5]

form.checkValidity() prüft die Constraints der Elemente, also z.B.: <input type="text" class="form-control" id="name" required> je nach CSS verändert sich das Aussehen des input-Feldes, meist so rote Wellenlinie oder so etwas, hier gibt es noch die Klasse invalid-feedback, offensichtlich macht die dann ein Element sichtbar, wenn ein anderes Element invalid ist. Wenn alles valide ist, dann soll offensichtlich ein etwas ungeschickter POST-Request gemacht werden.

fetch("api/v1/hinzufuegen", {
  method: "POST",
  body: JSON.stringify({
    userId: 1,
    title: "Fix my bugs",
    completed: false
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8"
  }
})
  .then((response) => response.json())
  .then((json) => console.log(json));

Es ist auch etwas schwer zu erkennen, aber ich vermute die Tags in der Form sind falsch gesetzt. Ich denke da ist ein </div> zuviel und deshalb könnte die Form nicht richtig selektiert werden.
Das JS steht hoffentlich nach dem HTML-Code, denn es wird ja sofort ausgeführt. Also muss das HTML fertig geladen sein.

 

[BodyLAB]

Vielen Dank.
Ich habe es aus frust jetzt jedoch selbst geschrieben und die Validierung von Bootstrap über den haufen geworfen :-D
Läuft und tut was es soll

Das vergessene DIV war wohl auch schuld daran das die Daten fehlerhaft gesendet wurden ;-)
Grüße