Estoy creando un formulario simple pero estoy atascado: si envío solo el campo de correo electrónico, el formulario valida el correo electrónico y lo envía
si agrego dos campos, no puedo hacer que funcione:
Necesito agregar la validación de que el campo de nombre no está vacío y que el campo de casilla de verificación está marcado
$(document).ready(function($) { var jsForm = $('.js-form-download'); jsForm.on('submit', function(e) { var email = $(this).find('input[type=text]').val(); if (!validateEmail(email)) { e.preventDefault(); jsForm.addClass('form-error'); } }); // VALIDATION BEGIN function validateEmail(email) { var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; return re.test(email); } //VALIDATION END }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form accept-charset="UTF-8" action="/form.php" method="POST" class="main-download-form text-center js-form-download"> <input class="infusion-field-input-container" id="CustomFields_2_1" name="CustomFields[2]" type="text" placeholder="Enter Your Name" autocomplete="off" required=""> <input class="infusion-field-input-container" id="inf_field_Email" name="email" type="text" placeholder="Enter Your Email Address" autocomplete="off" required=""> <!-- field GDPR 1 REQUIRED --> <div class="form-single--checkbox" style="max-width:400px; margin: 0 auto 20px;"> <label style="font-weight:normal;"><input type="checkbox" id="pcheck" style="width:18px; height: 18px; margin-left:0%; margin-bottom:0px;"/>Accetto il Regolamento della <a href="/privacy/" style="color: #418bbd;" target="_blank" rel="noopener"><strong>Privacy</strong></a> </label> </div> <input class="btn-full" type="submit" value="Continue..."> </form>Tu problema está aquí var email = $(this).find('input[type=text]').val();
esto le dará el .val() del primer elemento INPUT , y si observa más de cerca, la primera INPUT en su formulario es en realidad el nombre
<input class="infusion-field-input-container" id="CustomFields_2_1" name="CustomFields[2]" type="text" placeholder="Enter Your Name" autocomplete="off" required="">Entonces, no el correo electrónico .
En su lugar, utilice:
var email = $(this).find('[name=email]').val();O, dado que ya usa selectores de ID en su HTML
var email = $("#inf_field_Email").val();