Entonces, en este momento, básicamente estoy usando el validador de formulario Bootstrap V5 predeterminado y me preguntaba si hay una manera de crear un parámetro personalizado que deba verificarse para que la entrada sea válida. En este momento, quiero que el usuario ingrese su matrícula, que debe incluir letras y números. Obtuve más o menos la parte que se debe incluir, pero bootstrap todavía dice que la entrada es válida, incluso si técnicamente no lo es, porque solo verifica si hay alguna entrada en el campo. ¿Habría alguna manera de cambiar las vistas de arranque como válidas?
La función de validación de arranque predeterminada se ve así:
// Example starter JavaScript for disabling form submissions if there are invalid fields (function () { 'use strict' // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.querySelectorAll('.needs-validation') // Loop over them and prevent submission Array.prototype.slice.call(forms) .forEach(function (form) { form.addEventListener('submit', function (event) { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList.add('was-validated') }, false) }) })()Después de pasar la mayor parte de la tarde investigando el mismo tema, hay muy poca información sobre la validación JS personalizada con la validación OOB Bootstrap. He concluido que hay dos opciones viables:
pattern en el elementocheckValidity() Al crear una input , puede establecer un atributo de patrón en el elemento.
Del artículo de patrón de MDN:
<p> <label>Enter your phone number in the format (123) - 456 - 7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>) - <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p>Aquí tenemos 3 secciones para un número de teléfono norteamericano con una etiqueta implícita que abarca los tres componentes del número de teléfono, esperando 3 dígitos, 3 dígitos y 4 dígitos respectivamente, según lo define el atributo de patrón establecido en cada uno.
Al invocar el método checkValidity() , inyecte la validación JS personalizada para invalidar el envío del formulario.
const myValidation = someValidation() if (!myValidation || !form.checkValidity()) { event.preventDefault() event.stopPropagation() } Al invocar someValidation() , asegúrese de agregar/eliminar las clases de validación según sea necesario:
// valid input const foo = document.getElementById("foo") foo.classList.remove("is-invalid") foo.classList.add("is-valid") // invalid input const bar = document.getElementById("bar") bar.classList.add("is-invalid") bar.classList.remove("is-valid") Sin embargo, no he descubierto cómo evitar por completo que el marco de validación muestre la entrada como válida (marca de verificación en el lado derecho de la entrada) aunque las clases estén configuradas correctamente. Sospecho que tiene algo que ver con que el atributo de patrón esté vacío, lo que simplemente significa que el campo no puede estar vacío, y también es necesario invocar el método reportValidity() del elemento: HTML Spec: reportValidity()
Parece el atributo de patrón y RegEx es el camino a seguir cuando se usa este marco de validación.
Esperemos que alguien más pueda mejorar esta respuesta con un mejor camino a seguir utilizando el método JS puro.