Möchten Sie eine Mindestanzahl von Auswahlmöglichkeiten für Ihr Checkbox-Formularfeld festlegen? WPForms unterstützt derzeit die Begrenzung der Anzahl der Auswahlmöglichkeiten für das Checkbox-Feld. Mit einem benutzerdefinierten Snippet können Sie jedoch eine Mindestanzahl für diese Auswahlmöglichkeiten mithilfe eines kleinen PHP-Code-Snippets festlegen.
In diesem Tutorial führen wir Sie durch die Schritte, mit denen Sie Ihr Checkbox-Formularfeld so einrichten, dass eine Mindestanzahl an Auswahlmöglichkeiten erforderlich ist.
Bevor Sie beginnen, stellen Sie sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist und dass Sie Ihre Lizenz überprüft haben.
Erstellen des Formulars
Zunächst müssen Sie ein neues Formular erstellen oder ein bestehendes bearbeiten, um auf den Formularersteller zugreifen zu können. Stellen Sie im Formularersteller sicher, dass Ihr Formular mindestens ein Kontrollkästchen enthält.
Hinzufügen des Snippets zum Festlegen einer Mindestanzahl
Um eine Mindestanzahl von Auswahlmöglichkeiten festzulegen, müssen Sie dieses Code-Snippet in Ihre Website einfügen. Wenn Sie Hilfe beim Hinzufügen von Code-Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.
/**
* Set minimum number of choices for a checkbox for the field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_checkbox_validation( $field_id, $field_submit, $form_data ) {
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_checkbox_validation', 10, 3 );
Im obigen Code sind für jedes Kontrollkästchen mindestens zwei Auswahlmöglichkeiten erforderlich. Wenn Sie die Mindestanzahl aktualisieren möchten, ändern Sie den Wert in der if-Anweisung.
Hinweis: Dieses Snippet gilt für das Feld "Checkbox" in allen Formularen auf Ihrer Website.
Wenn ein Benutzer in Ihrem Formular weniger als zwei Auswahlmöglichkeiten auswählt, wird beim Absenden des Formulars eine Meldung unter dem Feld Checkbox angezeigt.
Festlegen eines Limits für mehrseitige Formulare
Wenn Sie mehrseitige Formulare verwenden, möchten Sie möglicherweise nicht auf die Übermittlung des Formulars warten, bevor der Fehler angezeigt wird.
Bei mehrseitigen Formularen können Sie ganz einfach eine Warnmeldung unter dem Feld " Checkbox" anzeigen, wenn auf die Schaltfläche " Weiter" geklickt wird.
Um diese Option zu nutzen, fügen Sie stattdessen einfach dieses Code-Snippet in Ihre Website ein.
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox-field/
*/
function wpf_dev_min_checkbox() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var checkbox_forms = [
{form_id: 1000, min_count: 2, field_ids: [10,9]},
];
$('[id^=wpforms-] input[type=checkbox]').on('click', function(e){
var this_form_id = $(this).closest('form').data("formid");
var checkbox_form_ids = checkbox_forms.map(form => form.form_id);
if (checkbox_form_ids.includes(this_form_id)){
var checkbox_container = $(this).closest(".wpforms-field-checkbox");
var checkbox_container_field_id = checkbox_container.data("field-id");
checkbox_forms.forEach(function(form) {
if (this_form_id == form.form_id){
var min_value = form.min_count;
var field_ids_array = form.field_ids;
if (field_ids_array.includes(checkbox_container_field_id)){
validate_checkbox_min(e, checkbox_container, min_value);
}
}
});
}
});
function validate_checkbox_min(e, checkbox_container, min){
var minMaxSelection = checkbox_container.find('input[type=checkbox]:checked');
var this_field = $('[id^=wpforms-' + checkbox_container.data("field-id") + '-field_' + checkbox_container.data("field-id") + '-container]');
var warning_id = 'wpforms-' + checkbox_container.data("field-id") + '-warning';
$("#" + warning_id).remove();
if (minMaxSelection.length > 0 && minMaxSelection.length < min) {
e.stopPropagation();
this_field.addClass("wpforms-error");
this_field.removeClass("wpforms-valid");
this_field.attr('aria-invalid', 'true');
checkbox_container.addClass("wpforms-has-error");
checkbox_container.append('<em id="' + warning_id + '" class="wpforms-error" role="alert" aria-label="Error message" for="">Please select at least ' + min + ' options</em>');
} else {
this_field.removeClass("wpforms-error");
this_field.addClass("wpforms-valid");
this_field.attr('aria-invalid', 'false');
checkbox_container.removeClass("wpforms-has-error");
}
}
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_min_checkbox');
Dieses Codeschnipsel zielt auf die Formular-ID 1000 und wenn die Weiter angeklickt wird, prüft das Snippet zunächst, wie viele Auswahlmöglichkeiten für das Feld ID ausgewählt sind 10 und 9und wenn es weniger als zwei sind, wird eine Warnmeldung im Browser angezeigt.
Häufig gestellte Fragen
Im Folgenden haben wir einige der häufigsten Fragen zum Festlegen einer Mindestanzahl von Auswahlmöglichkeiten für das Feld Checkbox beantwortet.
F: Kann ich dies nur für ein bestimmtes Formular und eine bestimmte Feld-ID verwenden?
A: Auf jeden Fall! Um diesen Code für ein bestimmtes Formular zu verwenden, benutzen Sie das folgende Code-Snippet:
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_checkbox_validation( $field_id, $field_submit, $form_data ) {
// Change the number to match your form ID
if ( absint( $form_data[ 'id' ] ) !== 1289 ) {
return;
}
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_dev_checkbox_validation', 10, 3 );
Wenn Sie ein bestimmtes Formular und eine bestimmte Feld-ID anvisieren möchten, verwenden Sie dieses Codeschnipsel.
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_checkbox_validation( $field_id, $field_submit, $form_data ) {
// Change the number to match your form ID
if ( absint( $form_data[ 'id' ] ) !== 1289 ) {
return $field_id;
}
// Change this number to match the field ID
if (absint($field_id) === 15 ) {
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_dev_checkbox_validation', 10, 3 );
Hinweis: Wenn Sie Hilfe bei der Suche nach Ihren Formular- und Feld-IDs benötigen, lesen Sie bitte diesen Leitfaden.
F: Kann dies auch für Zahlungsfelder funktionieren?
A: Auf jeden Fall! Um dies für das Formularfeld " Payment Checkbox Items" zu nutzen, verwenden Sie dieses Snippet.
/**
* Set minimum number of choices for a payment checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_limit_payment_field( $field_id, $field_submit, $form_data ) {
$form_id = 731; // Limit to form ID: Use 0 to target all forms
$fieldID = 21; // Limit to field ID: Use 0 to target all checkbox fields
$min = 2; // Change the minimum amount
$max = 5; // Change the maximum amount
// Limit to specific form if {$form_id} is set
if ( absint( $form_data[ 'id' ] ) !== $form_id && !empty( $form_id ) ) {
return;
}
// Limit to specific field ID if {$fieldID} is set
if ( absint( $field_id ) !== $fieldID && !empty( $fieldID ) ) {
return;
}
// Make sure we have an array of choices and count the number of choices.
$count = is_array( $field_submit ) ? count( $field_submit ) : 0;
// Process error if choices count is less than {$min} or greater than {$max}
if( count( $field_submit ) < $min ) {
wpforms()->process->errors[ $form_data[ 'id' ] ] [ $field_id ] = esc_html__( 'Please select a minimum of ' . $min .' choices.', 'your-text-domain' );
} elseif ( count( $field_submit ) > $max ) {
wpforms()->process->errors[ $form_data[ 'id' ] ] [ $field_id ] = esc_html__( 'Please select a maximum of ' . $max . ' choices.', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_payment-checkbox', 'wpf_dev_limit_payment_field', 10, 3 );
Das war's! Sie haben jetzt gelernt, wie Sie eine Mindestanzahl von Auswahlmöglichkeiten für Ihre Kontrollkästchen festlegen können.
Möchten Sie als nächstes das Aussehen dieser Kontrollkästchen anpassen? Werfen Sie einen Blick auf unsere Anleitung zur Anpassung der Checkbox- und Multiple-Choice-Felder, damit sie wie Schaltflächen aussehen.
Verwandte Seiten
Aktionshinweise: