Quiero evitar cualquier envío de formulario, si el campo de entrada no tiene al menos 3 caracteres. Mi botón está deshabilitado si la longitud <= 3 pero no puedo evitar el envío en "Entrar".
<form name="form" action="..." method="POST" id="form"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" required> </div> <input type="button" id="btnSubmit" value="Add" disabled> </form> </div> <script> const form = document.querySelector('#form'); const inputName = document.querySelector('#name'); const btnSubmit = document.querySelector('#btnSubmit'); inputName.addEventListener('input', function(event) { btnSubmit.disabled = inputName.value.length < 3; }); inputName.addEventListener('keypress', function (event){ if (event.keyCode === 13) { event.preventDefault(); if (inputName.value.length >= 3) form.submit(); } }); form.addEventListener('keypress', function (event){ event.preventDefault(); });Establezca un valor de longitud mínima para su campo de entrada
<!DOCTYPE html> <html> <body> <h1>The input minlength attribute</h1> <form action="/action_page.php"> <label for="password">Password:</label> <input type="password" id="password" name="password" minlength="8"><br><br> <input type="submit" value="Submit"> </form> </body> </html>Modifique la última parte de su secuencia de comandos de la siguiente manera:
form.addEventListener('submit', (event) => { event.preventDefault(); // your actions });Establezca un valor de longitud mínima para su campo de entrada
<input type="text" class="form-control" id="name" name="name" minlength="3" required>El atributo minlength define la cantidad mínima de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un o . Debe ser un valor entero 0 o superior. La entrada fallará en la validación de la restricción si la longitud del valor de texto del campo es menor que las unidades de código UTF-16 de longitud mínima, y ValidezState.tooShort devuelve verdadero. La validación de restricciones solo se aplica cuando el usuario cambia el valor. Una vez que falla el envío, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.
Fuente: atributo HTML: minlength