Introduzione
Desiderate impostare un numero minimo di caratteri per alcuni campi del vostro modulo? All'interno del costruttore di moduli, è già possibile impostare un numero massimo per questo campo seguendo questa documentazione.
Tuttavia, utilizzando un piccolo snippet JavaScript è possibile impostare anche un numero minimo. Questo può essere molto utile se si desidera impostare il campo Password su un numero minimo di caratteri.
In questa esercitazione, creeremo un modulo di esempio e applicheremo questo numero minimo di caratteri a un campo di testo a riga singola, a un campo password e a un campo di testo paragrafo.
Creazione del modulo
Iniziamo creando un nuovo modulo. Nel nostro modulo di esempio aggiungeremo i campi Nome, Password e Bio (testo del paragrafo), che avranno tutti un limite minimo di caratteri.
Se avete bisogno di assistenza per creare il vostro modulo, consultate questa documentazione.
Aggiunta delle classi CSS
Ora dobbiamo aggiungere un nome di classe CSS a ciascuno dei campi a cui vogliamo applicare il limite minimo di caratteri.
All'interno del costruttore di moduli, selezionare il campo che si desidera modificare. Facendo clic su Opzioni campo e poi su Avanzate, possiamo aggiungere la nostra classe CSS alle Classi CSS. La classe da aggiungere è 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.
Ripetere questo passaggio per ogni campo del modulo per il quale si desidera richiedere un numero minimo di caratteri. In questo esempio, abbiamo aggiunto la classe CSS solo ai campi ID utente, Password e Bio.
Aggiunta del codice JavaScript
Infine, per concludere la funzionalità, dobbiamo aggiungere un piccolo frammento di codice JavaScript al nostro sito.
Se avete bisogno di aiuto per aggiungere gli snippet di codice al vostro sito, consultate questo tutorial.
Nel nostro esempio, richiediamo un minimo di 8 caratteri per l'ID utente e la password, ma aumentiamo il minimo a 25 per il campo Bio.
Ricordate che se si utilizza una Maschera di input sul campo, questo frammento 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 Number Slider), password e testo di paragrafo. Si noti inoltre che i browser più vecchi potrebbero non supportare questo attributo.
Lo script qui sopra cercherà qualsiasi campo di testo o textarea che abbia questa classe CSS e applicherà la classe minLength ad esso. Se non riescono a inserire il numero minimo di caratteri, vedranno un messaggio di errore di convalida sotto ogni campo.
Ed ecco fatto! Ora avete creato il vostro modulo per richiedere un numero minimo di caratteri! Volete impostare un numero minimo e massimo anche per le caselle di controllo? Date un'occhiata al nostro tutorial su Come impostare un numero minimo e massimo di scelte per una casella di controllo.
Correlato
Riferimento azione: wpforms_wp_footer_end