So begrenzen Sie den zulässigen Bereich im Zahlenfeld

Möchten Sie den zulässigen Bereich im Zahlenfeld mit WPForms einschränken? Es gibt verschiedene Möglichkeiten, Mindest- und Höchstwerte für numerische Eingaben festzulegen.

Dieses Tutorial zeigt Ihnen die verfügbaren Methoden zur Implementierung von Bereichsbeschränkungen in Ihren Formularen.

Einrichtung des Formulars

Beginnen wir mit der Erstellung unseres Formulars und der Einbindung des Zahlenfeldes. Wenn Sie Anleitungen zur Erstellung Ihres Formulars benötigen, konsultieren Sie bitte diese Dokumentation für Schritt-für-Schritt-Anleitungen.

Einrichtung grundlegender Bereichsbeschränkungen

Das Zahlenfeld enthält Bereichssteuerungen im Bereich Feldoptionen. Geben Sie einfach Ihre Mindest- und Höchstwerte in die Bereichfelder ein, um die Benutzereingabe einzuschränken.

Weitere Details zu den Funktionen des Zahlenfeldes finden Sie in unserem Leitfaden zur Verwendung des Zahlenfeldes.

Implementierung erweiterter Bereichssteuerungen

Für spezielle Anforderungen, wie z. B. die Erzwingung gerader Zahlen oder benutzerdefinierte Validierungsnachrichten, können Sie JavaScript verwenden, um benutzerdefinierte Bereichssteuerungen zu implementieren. Wenn Sie Anleitungen zum Hinzufügen von Code-Snippets benötigen, beachten Sie bitte diesen Leitfaden zum Hinzufügen von benutzerdefiniertem Code in WordPress.

Hinzufügen der CSS-Klasse

Zuerst fügen wir dem Feld eine CSS-Klasse hinzu, um sicherzustellen, dass dieses Snippet immer dann aufgerufen wird, wenn ein Zahlenfeld mit dieser speziellen Klasse vorhanden ist. Um einem Feld eine CSS-Klasse hinzuzufügen, öffnen Sie den Formular-Builder, klicken Sie auf das Zahlenfeld, um das Panel Feldoptionen zu öffnen. Klicken Sie dann auf Erweitert und fügen Sie im Feld CSS-Klassen wpf-num-limit hinzu.

Hinzufügen des Code-Snippets

Nun integrieren wir das Snippet.

Dieses spezielle Snippet erzwingt einen Mindestwert von 5 und einen Höchstwert von 20 für jedes Zahlenfeld mit der CSS-Klasse 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 );

Nach dem Speichern des Formulars erhalten Benutzer eine Validierungsfehlermeldung, wenn sie versuchen, eine Zahl einzugeben, die außerhalb des im Code definierten Bereichs liegt.

Nur gerade Zahlen zulassen

Um einen Schrittwert hinzuzufügen, der nur die Auswahl gerader Zahlen erzwingt, verwenden Sie den folgenden Code-Snippet:

/**
 * 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 );

Arbeiten mit mehreren Formularen

Verwenden Sie den folgenden Snippet, wenn Sie verschiedene CSS-Klassen verwenden, um eindeutige Bereiche für verschiedene Formulare festzulegen:

In diesem Beispiel verwenden wir wpf-num-limit-max-under–twenty und 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 );

Anpassen der Fehlermeldung

Verwenden Sie den folgenden Code-Snippet, um die Standardfehlermeldung zu ändern, die angezeigt wird, wenn Benutzer ungültige Zahlen eingeben.

/**
 * 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 );

Damit ist der Vorgang abgeschlossen! Sie haben erfolgreich sowohl einen Mindest- als auch einen Höchstwert für Ihr Zahlenfeld festgelegt. Wenn Sie den Indikator für erforderliche Felder anpassen möchten, können Sie unseren Artikel über das Ändern des Indikators für erforderliche Felder für weitere Details einsehen.

Referenzaktion

wpforms_wp_footer_end