Breaking

Post Top Ad

Your Ad Spot

lunes, 18 de marzo de 2019

Cómo validar la longitud mínima y mínima del campo de entrada utilizando jQuery

Al usar los atributos minlength y maxlength de HTML5, puede administrar la longitud del texto del campo de entrada. Pero si desea mostrar un mensaje de validación personalizado, puede hacerlo fácilmente con jQuery. En este tutorial, le mostraremos cómo validar la longitud mínima y máxima del campo de entrada utilizando jQuery.
En el código de ejemplo, implementaremos la validación de la longitud del texto de entrada usando jQuery. En función de la entrada del usuario, el mensaje de validación se mostrará junto al campo de entrada.
Incluya la biblioteca jQuery para validar la longitud del campo de entrada usando jQuery.
< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script >
jQuery
En función del valor mínimo (minLength) y máximo (maxLength) se valida la longitud de entrada. Si la longitud excede, el valor adicional será eliminado.
var minLength =  5 ;
var maxLength =  10 ;
$ ( document ) .ready ( function () {
     $ (' #card ') .on ( 'keydown keyup change' , function () {
         var  char  =  $ ( this ) .val ();
         var charLength =  $ ( this ) .val () .length ;
         if (charLength <minLength) {
             $ (' span ') .text ( 'La longitud es corta, mínimo' + minLength + 'required.' );
        } else  if (charLength > maxLength) {
             $ (' span ') .text ( 'La longitud no es válida, máximo' + maxLength + 'permitido.' );
            $ ( this ) .val ( char . substring ( 0 , maxLength));
        } else {
             $ (' span ') .text ( 'La longitud es válida' );
        }
    });
});
HTML
El mensaje de validación se muestra en la etiqueta span >.
< input  type = "text"  id = "card" />
< span > </ span >

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas