Pasé tantas horas buscando una etiqueta de entrada HTML o Javascript que impida el envío de formularios cuando la entrada es solo 3 números. No quiero usar caracteres porque mi campo de entrada solo requiere números.
<input name="Code" value="000" onchange="leadingZeros(this)" onkeyup="leadingZeros(this)" onclick="leadingZeros(this)" autocomplete="off" id="myInput" type='text' required="" /> function leadingZeros(input) { if(!isNaN(input.value) && input.value.length === 1) { input.value = '000' + input.value; }}
Estoy usando el código anterior en mi formulario para forzar la entrada de tres ceros (000) antes de los números que los usuarios proporcionan en el campo de entrada.
Algunos usuarios pueden olvidarse de completar ese campo y proceder a enviar mi formulario y el formulario se enviará porque detecta que el campo no está vacío.
Algunos usuarios se olvidan de completar el campo y solo obtengo los tres ceros (000) cuando se envía el formulario.
Quiero evitar el envío del formulario cuando se olvidan de ingresar sus números después de los primeros tres ceros y les digo a los usuarios que LA ENTRADA NO PUEDE SER 3 NÚMEROS .
Eso les recordará que los primeros tres ceros estaban en el campo de entrada y aún tienen que proporcionar sus números después.
¿Cómo puedo hacer esto, por favor?
Podrías usar la validación de formularios . Por ejemplo, para forzar una entrada de tres ceros seguidos de uno o varios dígitos:
<input pattern="^000\d+$" required />Puede escribir su código así para lograr el propósito. Lea los comentarios para más comprensión
Código HTML
<form id="myForm"> <input name="Code" value="000" autocomplete="off" id="myInput" type='text' required="" /> </form>Código JavaScript
document.querySelector('#form').addEventListener("submit", function(e) { //prevent default behaviour e.preventDefault() // collect input value let inputValue = document.querySelector('#myInput').value //check whether input value is not number or less than 3 char if(!isNaN(inputValue) || inputValue.length < 3){ alert('Error. Input must be a number and more than 3 characters') } // submit the form data with with AJAX })Si no sabe cómo usar AJAX ni tiene la intención de usar AJAX, puede tener su HTML escrito así con button/ input type='button' para que el formulario no se envíe automáticamente cuando el usuario presione el botón
<form id="myForm"> <input name="Code" value="000" autocomplete="off" id="myInput" type='text' required="" /> <button type="button" id="myButton"> submit </button> </form>Luego, usa JavaScript para enviar el formulario cuando se hace clic en el botón de esta manera
document.querySelector('#myButton').addEventListener("click", function(e) { //prevent default behaviour e.preventDefault() // collect input value let inputValue = document.querySelector('#myInput').value //check whether input value is not number or less than 3 char if(!isNaN(inputValue) || inputValue.length < 3){ alert('Error. Input must be a number and more than 3 characters') } //submit form document.querySelector('#form').submit() })