Cómo establecer un número mínimo de caracteres en un campo de texto del formulario

Introducción

¿Te gustaría establecer un número mínimo de caracteres para algunos de tus campos del formulario? Dentro del constructor de formularios, ya puedes establecer un número máximo para este campo siguiendo esta documentación.

Sin embargo, usando un pequeño fragmento de JavaScript también puedes establecer un número mínimo. Esto puede ser muy útil si deseas establecer tu campo de Contraseña a un número mínimo de caracteres.

En este tutorial, vamos a crear un formulario de ejemplo y aplicaremos este número mínimo de caracteres a un campo de Texto de una sola línea, un campo de Contraseña y un campo de Párrafo de texto.

Creación de su formulario

Empecemos creando un nuevo formulario. Dentro de nuestro formulario de ejemplo, vamos a añadir los campos Nombre, Contraseña y Biografía (Texto de párrafo), a los cuales se les establecerá un límite mínimo de caracteres.

Si necesita ayuda para crear su formulario, consulte esta documentación.

Añadiendo las clases CSS

Ahora necesitamos añadir un nombre de clase CSS a cada uno de los campos a los que queremos aplicar este límite mínimo de caracteres.

Mientras estás en el constructor de formularios, selecciona el campo que deseas editar. Al hacer clic en Opciones de campo y luego en Avanzado, podemos añadir nuestra clase CSS a las Clases CSS. La clase que añadirás es wpf-char-min.

Al añadir esta clase CSS, le estamos dando a JavaScript una señal para buscar, de modo que solo ejecutará el script en los campos con esta clase CSS.

Repite este paso para cada campo del formulario al que quieras exigir una cantidad mínima de caracteres. Para este ejemplo, solo hemos añadido la clase CSS a los campos del formulario ID de usuario, Contraseña y Biografía.

Añadiendo el JavaScript

Y finalmente, para completar la funcionalidad, necesitamos añadir un pequeño fragmento de código JavaScript a nuestro sitio.

Si necesitas ayuda para añadir fragmentos de código a tu sitio, por favor revisa este tutorial.

En nuestro ejemplo a continuación, exigimos un mínimo de 8 caracteres para el ID de usuario y la Contraseña, pero aumentamos el mínimo a 25 para el campo Biografía.

/**
 * Set minimum number of characters
 *
 * @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-characters-on-a-text-form-field/
 */

function wpf_dev_char_min() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            jQuery( '.wpf-char-min input' ).prop( 'minLength', 8 );
            jQuery( '.wpf-char-min textarea' ).prop( 'minLength', 20 );

            jQuery.extend(jQuery.validator.messages, {
                minlength: jQuery.validator.format( "Please enter at least {0} characters" ),
            });

 });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_min', 10 );

El script anterior buscará cualquier campo de texto o textarea que tenga esta clase CSS y le aplicará la configuración minLength. Si no introducen el número mínimo de caracteres, verán un mensaje de error de validación debajo de cada campo.

¡Y eso es todo! Ahora has creado tu formulario para exigir una cantidad mínima de caracteres. ¿Te gustaría establecer un número mínimo y máximo para las casillas de verificación también? Echa un vistazo a nuestro tutorial sobre Cómo establecer un número mínimo y máximo de opciones para una casilla de verificación.

Relacionado

Referencia de acción: wpforms_wp_footer_end