Me gustaría mostrar un mensaje sobre el campo de nombre si el usuario envía un nombre con una longitud superior a 20. Esto significa que el formulario no se enviará; en otras palabras, la acción del formulario no se activará.
Probé casi todas las sugerencias que pude encontrar para evitar que la acción del formulario se active al validar el formulario, pero nada parece funcionar.
Me he topado con una pared con esto y no puedo entender qué estoy haciendo mal. ¿Cómo se puede rectificar esto?
html:
<form method="POST" id="form" action="/post.php"> <span class="nameError"></span> <input type="text" class="name" name="name" placeholder="Name" required/> <input class="button" type="submit" value="Submit"/> </form>Aquí está mi jquery:
let name = $('.name'); let nameError= $('.nameError'); $(document).ready(function() { $('input[type=submit]').on('click', function(e) { if (name.length > 20) { e.preventDefault(); nameError.val("Too many characters!"); return false; } }); });He modificado la lógica para la validación. Básicamente, necesitamos capturar el evento de envío para el formulario y usar los métodos jquery correctos para recuperar datos basados en los selectores.
$(document).ready(function() { $("#form").submit(function( event ) { let name = $('.name').val(); let nameError= $('.nameError'); if (name.length > 20) { nameError.text("Too many characters!"); event.preventDefault(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <form method="POST" id="form" action="/post.php"> <input type="text" class="name" name="name" placeholder="Name" required/> <label class="nameError"></label> <br/> <input class="button" type="submit" value="Submit"/> </form>