Riassunto AI
Introduzione
Desideri impostare un numero minimo di caratteri per alcuni dei tuoi campi modulo? All'interno del generatore di moduli, puoi già impostare un numero massimo per questo campo seguendo questa documentazione.
Tuttavia, utilizzando un piccolo snippet JavaScript puoi anche impostare un numero minimo. Questo può essere molto utile se desideri impostare il tuo campo Password a un numero minimo di caratteri.
In questo tutorial, creeremo un modulo di esempio e applicheremo questo numero minimo di caratteri a un campo Testo a riga singola, a un campo Password e a un campo Testo paragrafo.
Creazione del tuo modulo
Iniziamo creando un nuovo modulo. All'interno del nostro modulo di esempio aggiungeremo i campi Nome, Password e Bio (Testo paragrafo) che avranno tutti un limite minimo di caratteri impostato.
Se hai bisogno di assistenza nella creazione del tuo modulo, consulta questa documentazione.
Aggiunta delle classi CSS
Ora dobbiamo aggiungere un nome di classe CSS a ciascuno dei campi a cui vogliamo applicare questo limite minimo di caratteri.
Mentre sei nel generatore di moduli, seleziona il campo che desideri modificare. Facendo clic su Opzioni campo e poi su Avanzate, possiamo aggiungere la nostra classe CSS a Classi CSS. La classe che aggiungerai è wpf-char-min.
Aggiungendo questa classe CSS, diamo a JavaScript un flag da cercare in modo che esegua lo script solo sui campi con questa classe CSS.
Ripeti questo passaggio per ogni campo del modulo a cui desideri richiedere un numero minimo di caratteri. Per questo esempio, abbiamo aggiunto la classe CSS solo ai campi modulo ID utente, Password e Bio.
Aggiunta di JavaScript
E infine, per completare la funzionalità, dobbiamo aggiungere un piccolo snippet di codice JavaScript al nostro sito.
Se hai bisogno di aiuto per aggiungere snippet di codice al tuo sito, rivedi questo tutorial.
Nel nostro esempio qui sotto, richiediamo un minimo di 8 caratteri per ID utente e Password, ma aumentiamo il minimo a 25 per il campo Bio.
Ricorda che se stai utilizzando una Maschera di input sul campo, questo snippet di codice non funzionerà.
/**
* 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 );
L'attributo minLength può essere utilizzato con Testo a riga singola, Sito web / URL, Numero (non Slider numerico), Password e Testo paragrafo. Si noti inoltre che i browser meno recenti potrebbero non supportare questo attributo.
Lo script sopra cercherà qualsiasi campo di testo o textarea che abbia questa classe CSS e vi applicherà l'impostazione minLength. Se non inseriscono il numero minimo di caratteri, vedranno un messaggio di errore di convalida sotto ogni campo.
E questo è tutto! Ora hai creato il tuo modulo per richiedere un numero minimo di caratteri! Desideri impostare un numero minimo e massimo anche per le caselle di controllo? Dai un'occhiata al nostro tutorial su Come impostare un numero minimo e massimo di scelte per una casella di controllo.
Correlati
Riferimento Azione: wpforms_wp_footer_end