为什么所需的属性在 HTML 中对我不起作用

Question

I set a required attribute to multiple input fields, which are created and sent like the code below. The problem is that I can send the form/field data when the fields are empty. What have I done wrong with setting the required attribute?

 function subone() { var fl = $("#Flaeche-Grundstueckthree").val(); var zip = $("#Postleitzahl-der-Immobilie-2o").val(); var and = $("#Anrede-5a").val(); var name = $("#Name-5a").val(); var maila = $("#maila").val(); var tel = $("#Telefon-12a").val(); var data = { fl: fl, zip: zip, and: and, name: name, maila: maila, tel: tel, }; var ajaxurl = "send-data.php"; // We can also pass the url value separately from ajaxurl for front end AJAX implementations jQuery.post(ajaxurl, data, function (response) { //var data = JSON.parse(response); alert(response); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12"> <input type="tel" class="form-field bg-image phone w-input" maxlength="256" name="Telefon" data-name="Telefon" placeholder="Telefonnummer für Rückfragen" id="Telefon-12a" tabindex="-1" required /> </div> </div> <div class="row"> <div class="col-md-12"> <div style="display: flex; margin-bottom: 30px"> <div> <input type="checkbox" style="margin-right: 8px" required /> </div> <div style="font-size: 12px"> Durch das Anfordern der Immobilienbewertung stimme ich den Datenschutzbestimmungen zu. Ihre Daten sind bei uns geschützt und werden nicht an Dritte weitergegeben. </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <input type="button" onclick="subone();" value="Jetzt Bewertung erhalten" data-wait="Einen Moment..." class="button white-arrow vergleicher w-button" tabindex="-1" aria-hidden="true" s /> </div> </div>

Answer 1

You need to wrap your form in a form tag and change your button to type="submit"

Edit: I moved the event handler from onclick for the button to onsubmit for the form .

Also, I add the below codes to prevent from submission if there is an invalid input.

if (!event.target.checkValidity()) {
    event.preventDefault();
  }

 function subone(event) { if (!event.target.checkValidity()) { event.preventDefault(); } var fl = $("#Flaeche-Grundstueckthree").val(); var zip = $("#Postleitzahl-der-Immobilie-2o").val(); var and = $("#Anrede-5a").val(); var name = $("#Name-5a").val(); var maila = $("#maila").val(); var tel = $("#Telefon-12a").val(); var data = { fl: fl, zip: zip, and: and, name: name, maila: maila, tel: tel, }; var ajaxurl = "send-data.php"; // We can also pass the url value separately from ajaxurl for front end AJAX implementations jQuery.post(ajaxurl, data, function (response) { //var data = JSON.parse(response); alert(response); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form onsubmit="subone(event)"> <div class="row"> <div class="col-md-12"> <input type="tel" class="form-field bg-image phone w-input" maxlength="256" name="Telefon" data-name="Telefon" placeholder="Telefonnummer für Rückfragen" id="Telefon-12a" tabindex="-1" required /> </div> </div> <div class="row"> <div class="col-md-12"> <div style="display: flex; margin-bottom: 30px"> <div> <input type="checkbox" style="margin-right: 8px" required /> </div> <div style="font-size: 12px"> Durch das Anfordern der Immobilienbewertung stimme ich den Datenschutzbestimmungen zu. Ihre Daten sind bei uns geschützt und werden nicht an Dritte weitergegeben. </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <input type="submit" value="Jetzt Bewertung erhalten" data-wait="Einen Moment..." class="button white-arrow vergleicher w-button" tabindex="-1" aria-hidden="true" s /> </div> </div> </form>

Answer 2

Put your input elements and button inside <form>...</from> element, and make button type as submit instead of button . On click of button, submit event is fired on the <form> element.

Check docs here

 function subone() { var fl = $("#Flaeche-Grundstueckthree").val(); var zip = $("#Postleitzahl-der-Immobilie-2o").val(); var and = $("#Anrede-5a").val(); var name = $("#Name-5a").val(); var maila = $("#maila").val(); var tel = $("#Telefon-12a").val(); console.log("submit form", tel); var data = { fl: fl, zip: zip, and: and, name: name, maila: maila, tel: tel, }; var ajaxurl = "send-data.php"; // We can also pass the url value separately from ajaxurl for front end AJAX implementations jQuery.post(ajaxurl, data, function (response) { //var data = JSON.parse(response); alert(response); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form onsubmit="subone()"> <div class="row"> <div class="col-md-12"> <input type="tel" class="form-field bg-image phone w-input" maxlength="256" name="Telefon" data-name="Telefon" placeholder="Telefonnummer für Rückfragen" id="Telefon-12a" tabindex="-1" required /> </div> </div> <div class="row"> <div class="col-md-12"> <div style="display: flex; margin-bottom: 30px"> <div> <input type="checkbox" style="margin-right: 8px" required /> </div> <div style="font-size: 12px"> Durch das Anfordern der Immobilienbewertung stimme ich den Datenschutzbestimmungen zu. Ihre Daten sind bei uns geschützt und werden nicht an Dritte weitergegeben. </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <input type="submit" value="Jetzt Bewertung erhalten" data-wait="Einen Moment..." class="button white-arrow vergleicher w-button" tabindex="-1" aria-hidden="true" s /> </div> </div> </form>

Answer 3

Here required is an html prop and it will work only if you submit the form natively but you made it with javascript avoiding native html form checks. Instead of onclick="subone();" on your input use onsubmit="return subone();" on form element and don't forget to change type="button" to type="submit" on input.