Así que tengo una página que es register.php. Esta página tiene 3 componentes de información diferente requerida para registrar a un usuario. Estos componentes se ocultan y se muestran usando Jquery. Solo el primer componente tiene la información necesaria para registrarse, PERO el botón de registro/enviar está en el tercer componente.
Lo que quiero es verificar el formulario en el primer componente para que, en caso de que esté vacío o no sea correcto, no permita que el usuario pase al segundo componente. ¿Cómo puedo hacer esto sin enviar el formulario? Intenté llamar a una función como la siguiente, pero no funciona porque no recupera la información correctamente.
function checkform(form){ if(this.name.value == '' && this.email.value == '' && this.phone.value == '' && this.email.value == '' && this.password.value == '' && this.pasword_conf.value == ''){ if (this.password.value == this.password_conf.value){ if (this.password.value > 8){ $("div.component1").hide(); $("div.component2").show(); }else{ alert("La contraseña debe ser mayor a 8"); } }else{ alert("Las contraseñas deben ser iguales"); } }else{ alert("Por favor, complete todos los espacios"); } }Encontré algunos ejemplos en Internet usando AJAX, pero la mayoría de ellos revisaron el formulario y luego lo enviaron automáticamente, lo cual no es lo que quiero.
Editar: Este es el HTML.
<form action='register.php' method='POST' id='user-information'> <input type='text' class='form-control' placeholder='Nombre' name='name' id='name'/> <input type='text' class='form-control' placeholder='Correo' name='email' id='email'/> <input type='text' class='form-control' placeholder='Teléfono' name='phone' id='phone'/> <input type='password' class='form-control' placeholder='Contraseña' name='password' id='password'/> <input type='password' class='form-control' placeholder='Confirma contraseña' name='password_conf' id='password_conf'/> <button type='button' id='next-register' onclick='checkform(this.form)'> Siguiente </button> </form>Use el complemento de validación de JQuery. Será muy útil y puede validar el formulario antes de enviarlo y es muy fácil de usar.
Prueba esto:
$('form').on('submit',function () { var form = $(this); var validate = true; $.each(form.find('input:not([type="submit"])'), function (i, el) { if($(el).val() == '') validate = false; }); if (!validate) { alert("Por favor, complete todos los espacios"); return false; } var password = form.find('input[name="password"]').val(); var password_conf = form.find('input[name="password_conf"]').val(); if (password.length < 8 ) { alert("La contraseña debe ser mayor a 8"); return false; } if (password !== password_conf) { alert("Las contraseñas deben ser iguales"); return false; } $("div.component1").hide(); $("div.component2").show(); return false; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="component1"> <form action='register.php' method='POST' id='user-information'> <input type='text' class='form-control' placeholder='Nombre' name='name' id='name' /> <input type='text' class='form-control' placeholder='Correo' name='email' id='email' /> <input type='text' class='form-control' placeholder='Teléfono' name='phone' id='phone' /> <input type='password' class='form-control' placeholder='Contraseña' name='password' id='password' /> <input type='password' class='form-control' placeholder='Confirma contraseña' name='password_conf' id='password_conf' /> <button id='next-register'> Siguiente </button> </form> </div> <div class="component2" style="display:none;">This is component 2</div>`
const form = $('#step-1'); $('#step-2').hide(); const validate = (values) => { const errors = []; // Add validations if (!values[0].value) errors.push('Name is empty'); if (!values[1].value) errors.push('Email is empty'); return errors; } $('#step-1-next').on('click', function(e) { const values = form.serializeArray(); const errors = validate(values); if (!errors.length) { // Show step 2 form.hide(); $('#step-2').show(); } else { // Display errors errors.forEach(err => { console.log('error', err); }); } e.preventDefault(); }) $('#step-2-sutmit').on('click', function(e) { const values = form.serializeArray(); console.log('values', values); form.submit(); e.preventDefault(); }); <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <form id="step-1" action='register.php' method='POST'> <input type='text' class='form-control' placeholder='Nombre' name='name' id='name' /> <input type='text' class='form-control' placeholder='Correo' name='email' id='email' /> <input type='text' class='form-control' placeholder='Teléfono' name='phone' id='phone' /> <input type='password' class='form-control' placeholder='Contraseña' name='password' id='password' /> <input type='password' class='form-control' placeholder='Confirma contraseña' name='password_conf' id='password_conf' /> <button id="step-1-next" type="button">Next</button> </form> <div id="step-2"> <div> Step 2 </div> <button id="step-2-sutmit" type="button">Next</button> </div>Comprobar la lógica de envío