Realmente estoy luchando para que la validación de mi formulario funcione. Soy muy nuevo en JS, así que no estoy seguro de dónde me equivoqué. Traté de mirar a través, pero todavía no pude resolverlo. Por favor ayuda.
Aquí está mi JS
const fname = document.querySelector("#fname") const lname = document.querySelector("#lname") const email = document.querySelector("#email") const password = document.querySelector("#password") const phoneNumber = document.querySelector("#phone-number") form.addEventListener("submit", (e) => { e.preventDefault(); }); function checkInputs() { const fnameValue = fname.value; const lnameValue = lname.value.trim(); const emailValue = email.value.trim(); const passwordValue = password.value.trim(); const phoneNumberValue = phoneNumber.value.trim(); if(fname.value === "") { setErrorFor(fname, "This field cannot be blank"); } else { setSuccessFor(fname); } } function setErrorFor(input, message) { const inputContainer = input.parentElement; const small = inputContainer.querySelector("small"); small.innerText = message; inputContainer.classList.add("has-error"); }Aquí está mi HTML
<div class="input-container-first-name"> <label for="fname">First Name</label> <input id="fname" name="fname" type="text"> <small>Error message</small> </div>Es como el comentario de Andy, si no llamas a checkInputs , haz algo como esto:
const fname = document.querySelector("#fname") const lname = document.querySelector("#lname") const email = document.querySelector("#email") const password = document.querySelector("#password") const phoneNumber = document.querySelector("#phone-number") form.addEventListener("submit", (e) => { e.preventDefault(); checkInputs() }); function checkInputs() { const fnameValue = fname.value; const lnameValue = lname.value.trim(); const emailValue = email.value.trim(); const passwordValue = password.value.trim(); const phoneNumberValue = phoneNumber.value.trim(); if (fname.value === "") { setErrorFor(fname, "This field cannot be blank"); } else { setSuccessFor(fname); } } function setErrorFor(input, message) { const inputContainer = input.parentElement; const small = inputContainer.querySelector("small"); small.innerText = message; inputContainer.classList.add("has-error"); } const fname = document.querySelector("#fname") const lname = document.querySelector("#lname") const email = document.querySelector("#email") const password = document.querySelector("#password") const phoneNumber = document.querySelector("#phone-number") const form = document.querySelector("#form") form.addEventListener("submit", (e) => { e.preventDefault(); checkInputs() }); function checkInputs() { const fnameValue = fname.value; if (fnameValue === "") { setErrorFor(fname, "This field cannot be blank"); } else { setSuccessFor(fname); } } function setErrorFor(input, message) { const inputContainer = input.parentElement; const small = inputContainer.querySelector("small"); small.innerText = message; inputContainer.classList.add("has-error"); } <div class="input-container-first-name"> <form id="form"> <label for="fname">First Name</label> <input id="fname" name="fname" type="text"> <small>Error message</small> <button type="submit">Submit</button> </form> </div>en este código, las entradas están llamando a su evento de envío.