¿Hay alguna forma de que pueda insertar más letras en la matriz y llamarlas más rápido? Estoy tratando de codificar un formulario de validación ....... Esto funciona, pero se ejecuta uno a la vez y pasa a otro cuando se cumple la condición o se valida o no se valida. Eso es después de hacer clic en enviar... necesito soporte en javascript. Puedes revisar la foto aquí. https://prnt.sc/g8IKHTGdF1s2.. . Estaba pensando en usar while loop o for loop para agregar elementos (a, b, etc.) a la matriz, pero me quedé atascado, no sé por dónde empezar
const errorsFVEd = () => { let errors = []; const fnames = firstNam.value.trim(); const lnames = lastNam.value.trim(); const addys = Addy.value; const cits = CitNam.value; if (!isRequired(fnames)) { errors.push("a"); } else if (!isAlphabet(fnames)) { errors.push("b"); } else if (!isAlphabet(lnames)) { errors.push("d"); } else if (!isRequired(lnames)) { errors.push("e"); } else if (!isRequired(addys)) { errors.push("f"); } else if (!isRequired(cits)) { errors.push("g"); } else if (!isAlphabet(cits)) { errors.push("h"); } else { console.log(1); } return errors; } function validaForm() { let errors = errorsFVEd(); if (errors.length == 0) { document.getElementById("signup").submit(); } else { for (i = 0; i < errors.length; i++){ if (errors[i] == "a") { document.getElementById("error-first").innerHTML = "First name required."; } else if (errors[i] == "b") { document.getElementById("error-first").innerHTML = "Only alphabets allowed"; } else if (errors[i] == "d") { document.getElementById("error-last").innerHTML = "Last name required."; } else if (errors[i] == "e") { document.getElementById("error-last").innerHTML = "Only alphabets allowed."; }else if (errors[i] == "f") { document.getElementById("error-addy").innerHTML = "Address required"; } else if (errors[i] == "g") { document.getElementById("error-city").innerHTML = "City required"; }else if (errors[i] == "h") { document.getElementById("error-city").innerHTML = "Invalid city"; }else { console.log(1); } } } } ``Ahora, no vi el formulario, pero supongo que es algo como el siguiente ejemplo. Aquí hago uso de los atributos required y pattern . Un patrón es una expresión regular y se usa para probar si la entrada está bien o no.
La segunda cosa son los detectores de eventos para la input de eventos y invalid . Por lo tanto, si no es válido, el nombre de clase invalid se agrega al elemento de entrada (al intentar enviar) y cuando comienza a ingresar algo, se elimina. Esto hará que el elemento span se muestre y se oculte.
document.forms.form01.addEventListener('submit', e => { e.preventDefault(); console.log('submit'); }); document.forms.form01.addEventListener('input', e => { e.target.classList.remove('invalid'); }); document.forms.form01.addEventListener('invalid', e => { e.preventDefault(); e.target.classList.add('invalid'); }, true); form { display: flex; flex-direction: column; } .error { display: none; } input.invalid+span.error { display: inline; } <form name="form01"> <label>First: <input type="text" name="first" pattern="^\S{2,200}$" required> <span class="error">Only characters allowed (between 2 and 200).</span> </label> <label>Last: <input type="text" name="last" pattern="^\S{2,200}$" required> <span class="error">Only characters allowed (between 2 and 200).</span> </label> <label><button>Submit</button></label> </form>