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

Introducción

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

Sin embargo, utilizando un pequeño fragmento de JavaScript también puede establecer un número mínimo. Esto puede resultar muy útil si desea que su campo Contraseña tenga un número mínimo de caracteres.

En este tutorial, vamos a crear un formulario de ejemplo y aplicar este número mínimo de caracteres a un campo de texto de una línea, un campo de contraseña y un campo de texto de párrafo.

Creación del 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) que tendrán un límite mínimo de caracteres.

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

Añadir las clases CSS

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

Dentro del constructor de formularios, seleccione el campo que desea editar. Haciendo clic en Opciones de campo y luego en Avanzado podemos añadir nuestra clase CSS a las Clases CSS. La clase que vamos a añadir es wpf-char-min.

Al añadir esta clase CSS, le estamos dando a JavaScript una bandera que buscar para que sólo ejecute el script en los campos con esta clase CSS.

Repita este paso para cada campo de formulario que desee que requiera una cantidad mínima de caracteres. En este ejemplo, solo hemos añadido la clase CSS a los campos de formulario ID de usuario, Contraseña y Biografía.

Añadir JavaScript

Y por último, para concluir la funcionalidad, tenemos que añadir un pequeño fragmento de código JavaScript a nuestro sitio.

Si necesita ayuda para añadir fragmentos de código a su sitio, consulte este tutorial.

En nuestro ejemplo, 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 aplicará la clase minLength a la misma. Si no introducen el número mínimo de caracteres, verán un mensaje de error de validación debajo de cada campo.

Y ya está. Ya ha creado su formulario para que requiera una cantidad mínima de caracteres. ¿Le gustaría también establecer un número mínimo y máximo para las casillas de verificación? Eche 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

Acción de referencia: wpforms_wp_footer_end