Tengo un formulario html algo como esto:
<form id="contactForm"> <div> <label for="name">Name</label> <input type="text" name="name" id="name" required minlength="3" /> </div> <button type="submit">Submit</button> </form> Estoy usando validaciones html ya que mis requisitos son simples. Y quiero mostrar el cuadro de entrada en color rojo si el usuario ha ingresado un valor no válido. Intenté usar pseudoclases css valid e invalid así:
input:invalid { background-color: red; }El problema con esto es que todos los campos de entrada se muestran en rojo incluso cuando el usuario no ha tocado el campo. Para evitar este problema, estoy usando un evento de desenfoque en javascript.
const contactForm = document.forms.contactForm; const nameInp = contactForm.name; nameInp.onblur = function () { if (this.checkValidity()) { console.log("valid"); } else { console.error("invalid"); } };¿Es posible lograr esta funcionalidad sin javascript usando solo pseudoclases? No quiero que los cuadros de entrada se muestren en rojo hasta que el usuario haga clic en ellos.
Utilice :placeholder-shown , la entrada debe tener un marcador de posición
const contactForm = document.forms.contactForm; const nameInp = contactForm.name; nameInp.onblur = function () { this.removeAttribute('placeholder'); if (this.checkValidity()) { console.log("valid"); } else { console.error("invalid"); } }; input:invalid { background-color: red; } input:placeholder-shown, input:focus { background-color: unset; } <form id="contactForm"> <div> <label for="name">Name</label> <input type="text" name="name" id="name" required minlength="3" placeholder="name" /> </div> <button type="submit">Submit</button> </form>¡No se necesita javascript!
Puede lograr este efecto solo con CSS combinando un atributo de marcador de posición de longitud cero :
placeholder=""con la pseudoclase mostrada como marcador de posición :
:placeholder-shownEjemplo de trabajo:
input { display: block; } input:invalid { background-color: red; } input:invalid:placeholder-shown { background-color: white; } <label for="field-1">Field 1:</label> <input type="text" name="field-1" id="field-1" placeholder="" pattern=".{3,}" required /> <label for="field-2">Field 2:</label> <input type="text" name="field-2" id="field-2" placeholder="" pattern=".{3,}" required /> <label for="field-3">Field 3:</label> <input type="text" name="field-3" id="field-3" placeholder="" pattern=".{3,}" required />Otras lecturas
Problema OP:
El problema con esto es que todos los campos de entrada se muestran en rojo incluso cuando el usuario no ha tocado el campo. ¿Es posible lograr esta funcionalidad sin javascript usando solo pseudoclases? No quiero que los cuadros de entrada se muestren en rojo hasta que el usuario haga clic en ellos.
Agregue lo siguiente después de la input:invalid {}
input:not(:focus) { background-color: white; } input:placeholder-shown { background-color: white; }
Agregar placeholder= ' ' a cada <input>
Es el comportamiento que describiste sin JavaScript, solo CSS.
input:invalid { background-color: red; } input:not(:focus) { background-color: white; } input:placeholder-shown { background-color: white; } <form id="contactForm"> <fieldset> <label>Name</label> <input type="text" name="name" placeholder=' ' required minlength="3" /><br> <label>Email</label> <input type="email" name="email" placeholder=' ' required><br> <label>Lucky Number</label> <input type="number" name="number" placeholder=' ' required min='0' max='999'> <button type="submit">Submit</button> </fieldset> </form>