Estoy tratando de que los campos obligatorios funcionen, pero el formulario se envía antes de que finalice la validación y no estoy seguro de cómo puedo solucionarlo. ¿Hay alguna forma en que pueda arreglar esto?
Disculpas de antemano por el código desordenado.
<html> <script> function submitToAPI(e) { e.preventDefault(); $.ajax({ type: "POST", url : URL, dataType: "json", crossDomain: "true", contentType: "application/json; charset=utf-8", data: JSON.stringify(data), </script> <body> <form id="contact-form" method="POST"> <div class="formcontainer"> <div id='key'> <label for="requestoremail"><strong>Requestor's Email Address</strong></label> <input required class="defaultclass" id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" > <label for="purpose"><strong>Purpose of Request</strong></label> <input required class="defaultclass" id='purpose'type="text" placeholder="Enter purpose of the key " name="purpose" > </div> <div id='secret'> <label for="secretname"><strong>Secret Name</strong></label> <input class="secretclass" id='secretname' type="text" placeholder="Enter name of secret" name="secretname" > <label for="secretvalue"><strong>Secret Value </strong></label> <input class="secretvalueclass" id='secretvalue' type="text" placeholder="Enter value of secret" name="secretvalue" > </div> <button form="contact-form" type="button" onClick="submitToAPI(event)" class="btn btn-lg" >Submit</button> <script> $(document).ready(function(){ $(".defaultclass").attr('required',true); $(".secretclass").attr('required',false); $("#secret").hide(); $("#key").show(); </script> </body> </html>Su botón no tiene conocimiento de la forma en la que reside dentro. Solo obtiene la validación automática cuando el tipo de botón es submit . Porque es de tipo button , es solo eso, un botón.
Sin embargo, puede verificar programáticamente si su formulario es válido antes de disparar su llamada ajax
// true if your form passes the validity check const isValid = document.getElementById('contact-form').checkValidity();