Riassunto AI
Vuoi limitare l'intervallo consentito nel campo Numeri con WPForms? Esistono diversi modi per impostare valori minimi e massimi per l'input numerico.
Questo tutorial ti mostrerà i metodi disponibili per implementare limiti di intervallo nei tuoi moduli.
Impostazione del modulo
Iniziamo creando il nostro modulo e incorporando il campo Numeri. Se hai bisogno di una guida su come creare il tuo modulo, consulta questa documentazione per istruzioni passo passo.
Impostazione di limiti di intervallo di base
Il campo Numeri include controlli di intervallo nel pannello Opzioni campo. Inserisci semplicemente i tuoi valori minimi e massimi nei campi Intervallo per limitare l'input dell'utente.
Per maggiori dettagli sulle funzionalità del campo Numeri, consulta la nostra guida su come utilizzare il campo Numeri.
Implementazione di controlli di intervallo avanzati
Per requisiti specializzati come l'applicazione di numeri pari o messaggi di convalida personalizzati, puoi utilizzare JavaScript per implementare controlli di intervallo personalizzati. Se hai bisogno di una guida sull'aggiunta di snippet di codice, fai riferimento a questa guida su come aggiungere codice personalizzato in WordPress.
Aggiunta della classe CSS
Innanzitutto, aggiungeremo una classe CSS al campo per assicurarci che ogni volta che c'è un campo Numeri con questa particolare classe, questo snippet venga attivato. Per aggiungere una classe CSS a un campo, apri il generatore di moduli, fai clic su Numeri per aprire il pannello Opzioni campo. Quindi fai clic su Avanzate e in Classi CSS, aggiungi wpf-num-limit.
Aggiunta dello snippet di codice
Ora, integriamo lo snippet.
Questo particolare snippet impone un valore minimo di 5 e un valore massimo di 20 per qualsiasi campo Numeri dotato di una classe CSS denominata wpf-num-limit.
/**
* Limit number range allowed for a Numbers field
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Enter 5 minimum (5) and maximum (20) amount for the number field
jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } );
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
Dopo aver salvato il modulo, gli utenti incontreranno un errore di convalida se tentano di inserire un numero al di fuori dell'intervallo definito nel codice.
Limitazione solo ai numeri pari
Per aggiungere un valore di passo per imporre la selezione solo di numeri pari, utilizzare il seguente snippet di codice:
/**
* Limit number range in multiples of 2
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum accepted number is 20
// Maximum accepted number is 40
// Only accept multiples of 2
jQuery( '.wpf-num-limit input' ).attr( { 'min':20, 'max':40, 'step': 2 } );
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
Lavorare con più moduli
Utilizzare il seguente snippet quando si utilizzano diverse classi CSS per impostare intervalli univoci per moduli diversi:
In questo esempio, stiamo utilizzando wpf-num-limit-max-under–twenty e wpf-num-limit-max-under-fifty.
/**
* Two different CSS classes in the same function
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum set to 0, maximum set to 20
jQuery( '.wpf-num-limit-max-under-twenty input' ).attr({ 'min':0, 'max':20 });
// Minimum set to 21, maximum set to 50
jQuery( '.wpf-num-limit-max-under-fifty input' ).attr({ 'min':21, 'max':50 });
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
Personalizzazione del messaggio di errore
Utilizzare il seguente snippet di codice per modificare il messaggio di errore predefinito che appare quando gli utenti inseriscono numeri non validi.
/**
* Limit number range allowed for a Numbers field
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum 5, maximum 20
jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } ); // Define number limits
});
// Message to be displayed if the min and or max is not met
jQuery.extend(jQuery.validator.messages, {
max: jQuery.validator.format( "We apologize, there can only be a max allowance of {0}." ),
min: jQuery.validator.format( "We apologize, there needs to be a minimum allowance of {0}." )
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
Questo conclude il processo! Hai impostato con successo sia un valore minimo che massimo consentito per il tuo campo Numeri. Se desideri personalizzare l'indicatore di campo obbligatorio, puoi consultare il nostro articolo su Come modificare l'indicatore di campo obbligatorio per maggiori dettagli.