Tengo un formulario de varios pasos que necesita una validación adicional de la contraseña, el correo electrónico y la fecha de caducidad de la tarjeta de crédito. Como hay una función validarForm, quiero agregarla para que también verifique que la contraseña tenga 8 caracteres y que el correo electrónico sea válido ("@").
El problema principal es el ciclo for que dice que la entrada es válida/no válida antes de permitir que el usuario vaya al siguiente paso en el formulario. Por el momento, solo verifica si hay algo en cada casilla, si es así, pasa a la página siguiente. También lo necesito para comprobar que la contraseña o el correo electrónico sean válidos según las solicitudes anteriores.
var currentTab = 0; showTab(currentTab); function showTab(n) { /*need to add in password/email validation to below but unsure how */ var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Complete Order"; } else { document.getElementById("nextBtn").innerHTML = "Next"; } fixStepIndicator(n) } function nextPrev(n) { var x = document.getElementsByClassName("tab"); if (n == 1 && !validateForm()) return false; x[currentTab].style.display = "none"; currentTab = currentTab + n; if (currentTab >= x.length) { document.getElementById("orderForm").submit(); return false; } showTab(currentTab); } function validateForm() { var x, y, i, valid = true; x = document.getElementsByClassName("tab"); y = x[currentTab].getElementsByTagName("input"); for (i = 0; i < y.length; i++) { if (y[i].value == "") { y[i].className += "invalid"; valid = false; } } if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; } return valid; }Suponiendo que puede editar los elementos HTML y agregar identificaciones a los campos de entrada, simplemente puede usar document.getElementById para obtener cada entrada específica.
<html> <body> <input type="password" id="myPassword" /> <input type="email" id="myEmail" /> </body> </html> function validateForm() { const pwInput = document.getElementById('myPassword'); if( pwInput && pwInput.value.length < 5) { console.log('password not valid'); } const emailInput = document.getElementById('myEmail'); if(emailInput && emailInput.search(/@/) === -1) { console.log('email not valid'); } }Esto suena como tarea, por lo que es algo adicional para pensar en el código de producción.
Mientras que hacer la validación de contraseña en el lado del cliente está bien, el lado del servidor debe hacer absolutamente la validación de contraseña.
La validación de correo electrónico es muy difícil de hacer. Puede usar una expresión regular que encuentre, pero incluso las de Stack Overflow están llenas de advertencias y casos de prueba que no funcionan. Para el código de producción, usar una biblioteca junto con la verificación de correo electrónico es su mejor opción.