¿Alguien tiene una solución para Safari y Google Chrome para que el atributo de evento HTML oninvalid no funcione correctamente? En el contexto de mi aplicación, dentro del campo de name al principio, ingresé una respuesta no válida que era un número, luego corregí la respuesta a una entrada válida. Sin embargo, la entrada "ededde" no funcionó, que es una entrada válida que debe aceptarse. Aquí está mi video de demostración. ¿Tal vez cometí un error de sintaxis o el atributo ya no es compatible?
¿Qué método alternativo podría usar, que me permitiría personalizar manualmente el mensaje de error para cada campo de entrada y funcionar correctamente cuando el usuario cambia su entrada de inválida a válida? Vi una solución, un desbordamiento de pila, pero la solución no cubría múltiples campos de entrada diferentes como mi código de ejemplo.
Además, también estaba leyendo otra publicación y vi que alguien escribió un script JS, pero el código parecía ser muy complejo para este tipo de tarea. Por lo tanto, pensé que en el contexto de mi código para obtener alguna orientación, haría esta publicación ya que realmente tengo problemas para superar esta falla, un problema de atributo no compatible o un error de sintaxis que posiblemente cometí.
A continuación se muestra mi código que es relevante para el problema, si necesita ver más, hágamelo saber.
MI CÓDIGO
<div class="mb-3 text-white"> <label>Name</label> <input type="text" name="name" pattern="[A-Za-z]" oninvalid="alert('NAME ERROR: Please eneter characters only.');" required> </div> <div class="mb-3 text-white"> <label>Barcode</label> <input type="text" name="barcode" oninvalid="alert('BARCODE ERROR: Please input barcode here.');" required> </div> <div class="mb-3 text-white"> <label>Email</label> <input type="email" name="email" oninvalid="alert('EMAIL ERROR: Please input email here.');" required > </div>Esto se debe a que su patrón solo acepta un solo alfabeto : [A-Za-z] . Para aceptar una cadena alfabética que tiene una longitud de 1 o más, debe agregar un + al final, es decir, [A-Za-z]+ :
// This JS is only for demo purposes, so that a successful validation will not submit the form in the demo snippet document.querySelector('#my-form').addEventListener('submit', e => { console.log('Form valid! Will submit, but submission is prevented for demo purposes'); e.preventDefault(); }); <form id="my-form"> <div class="mb-3 text-white"> <label>Name</label> <input type="text" name="name" pattern="[A-Za-z]+" oninvalid="alert('NAME ERROR: Please eneter characters only.');" required> </div> <button>Submit</button> </form> En una nota al margen, sugiero enfáticamente no usar JS en línea . Lo que desea hacer se puede hacer fácilmente en JS: y también puede almacenar el mensaje de error deseado en atributos de data- para mayor comodidad:
// This JS is only for demo purposes, so that a successful validation will not submit the form in the demo snippet document.querySelector('#my-form').addEventListener('submit', e => { console.log('Form valid! Will submit, but submission is prevented for demo purposes'); e.preventDefault(); }); document.querySelectorAll('input').forEach(el => { const invalidMessageElement = el.nextElementSibling; el.addEventListener('invalid', () => { invalidMessageElement.textContent = el.dataset.invalidMessage; invalidMessageElement.classList.add('visible'); }); el.addEventListener('input', () => { invalidMessageElement.textContent = ''; invalidMessageElement.classList.remove('visible'); }); }); .invalid-message { display: none; color: red; } .invalid-message.visible { display: inline; } <form id="my-form"> <div class="mb-3 text-white"> <label>Name</label> <input type="text" name="name" pattern="[A-Za-z]+" required data-invalid-message="Please enter characters only."><span class="invalid-message"></span> </div> <div class="mb-3 text-white"> <label>Barcode</label> <input type="text" name="barcode" required data-invalid-message="Please input barcode here."><span class="invalid-message"></span> </div> <div class="mb-3 text-white"> <label>Email</label> <input type="email" name="email" required data-invalid-message"Please input email here."><span class="invalid-message"></span> </div> <button>Submit</button> </form>