KI-Zusammenfassung
Einleitung
Möchten Sie für einige Ihrer Formularfelder eine Mindestanzahl von Zeichen festlegen? Im Formular-Generator können Sie für dieses Feld bereits eine maximale Anzahl festlegen, indem Sie dieser Dokumentation folgen.
Mit einem kleinen JavaScript-Snippet können Sie jedoch auch eine Mindestanzahl festlegen. Dies kann sehr nützlich sein, wenn Sie möchten, dass Ihr Passwort-Feld eine Mindestanzahl von Zeichen hat.
In diesem Tutorial erstellen wir ein Beispielformular und wenden diese Mindestanzahl von Zeichen auf ein Einzeiliges Textfeld, ein Passwortfeld und ein Absatztextfeld an.
Erstellen Ihres Formulars
Beginnen wir mit der Erstellung eines neuen Formulars. In unserem Beispielformular fügen wir die Felder Name, Passwort und Biografie (Absatztext) hinzu, die alle eine Mindestzeichenbegrenzung haben werden.
Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, sehen Sie bitte diese Dokumentation an.
Hinzufügen der CSS-Klassen
Jetzt müssen wir jedem Feld, auf das wir diese Mindestzeichenbegrenzung anwenden möchten, einen CSS-Klassennamen hinzufügen.
Wählen Sie im Formular-Generator das Feld aus, das Sie bearbeiten möchten. Indem Sie auf Feldoptionen und dann auf Erweitert klicken, können wir unsere CSS-Klasse zu den CSS-Klassen hinzufügen. Die Klasse, die Sie hinzufügen werden, ist wpf-char-min.
Durch das Hinzufügen dieser CSS-Klasse geben wir JavaScript ein Flag, nach dem es suchen kann, sodass das Skript nur auf die Felder mit dieser CSS-Klasse angewendet wird.
Wiederholen Sie diesen Schritt für jedes Formularfeld, für das Sie ebenfalls eine Mindestanzahl von Zeichen festlegen möchten. In unserem Beispiel haben wir die CSS-Klasse nur zu den Formularfeldern Benutzer-ID, Passwort und Biografie hinzugefügt.
Hinzufügen des JavaScript
Und schließlich müssen wir, um die Funktionalität abzurunden, einen kleinen JavaScript-Code-Schnipsel zu unserer Website hinzufügen.
Wenn Sie Hilfe beim Hinzufügen von Code-Schnipseln zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
In unserem nachstehenden Beispiel fordern wir eine Mindestanzahl von 8 Zeichen für die Benutzer-ID und das Passwort, erhöhen aber die Mindestanzahl auf 25 für das Feld Biografie.
Bitte beachten Sie, dass dieser Code-Schnipsel nicht funktioniert, wenn Sie eine Eingabemaske für das Feld verwenden.
/**
* 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 );
Das Attribut minLength kann mit Einzeiliges Textfeld, Website/URL, Zahl (nicht Zahlenschieberegler), Passwort und Absatztext verwendet werden. Beachten Sie auch, dass ältere Browser dieses Attribut möglicherweise nicht unterstützen.
Das obige Skript sucht nach Text- oder Textbereichsfeldern mit dieser CSS-Klasse und wendet die Einstellung minLength darauf an. Wenn sie die Mindestanzahl von Zeichen nicht eingeben, sehen sie unter jedem Feld eine Validierungsfehlermeldung.
Und das ist alles! Sie haben jetzt Ihr Formular erstellt, das eine Mindestanzahl von Zeichen erfordert! Möchten Sie auch eine Mindest- und Höchstanzahl für Kontrollkästchen festlegen? Schauen Sie sich unser Tutorial an: So legen Sie eine Mindest- und Höchstanzahl von Auswahlmöglichkeiten für ein Kontrollkästchen fest.
Verwandt
Aktionsreferenz: wpforms_wp_footer_end