Validieren der Widget-Konfigurationsdaten auf der Admin-Seite

Ich habe ein einfaches Widget, dessen Breite und Höhe vom Benutzer festgelegt werden müssen, damit es im Blog korrekt angezeigt wird.

Die Sache ist: auf der Administrator / Aussehen / Widgets Seite, wenn der Admin-Benutzer etwas wie “400px” auf die Breite legt, funktioniert es perfekt. Aber was, wenn der Benutzer “xxxx” setzt?

Gibt es eine Möglichkeit, dass ich Javascript auslösen kann, wenn der Benutzer die Schaltfläche “Speichern” drückt, um den Benutzer darüber zu informieren, dass die Daten ungültig sind ? Ich suchte nach Haken auf der Schaltfläche zum Speichern oder nach Möglichkeiten, die Submit abzufangen, fand aber nichts.

Betrachte ich dieses Problem aus einer falschen Perspektive? Gibt es einen besseren Weg, dies zu tun?

Danke im Voraus.

Solutions Collecting From Web of "Validieren der Widget-Konfigurationsdaten auf der Admin-Seite"

@tf ist fast da, denke ich. Sie können JS im Admin-Formular Ihres Widgets verwenden, wie ich es zuvor getan habe (allerdings nicht zur validation).

Fügen Sie im Konstruktor Ihres Widgets eine Aktion hinzu:

add_action( "admin_print_scripts-widgets.php", array( __CLASS__, 'register_my_validation_script' ) ); 

Dann erstellen Sie die entsprechende function in der class Ihres Widgets:

 function register_my_validation_script() { wp_enqueue_script( 'my-script-handle', plugins_url( '/my-validation-script.js', __FILE__ ), array( 'jquery' ), '1.0' ); } 

Dies setzt voraus, dass Ihr JS ein Skript ( my-validation-script.js ) im Verzeichnis Ihres Plugins ist.

Innerhalb dieses JS-Skripts führt Ihre jQuery Ihre validation aus. Hier beginnt der Pseudocode …

 jQuery(document).ready(function($) { $('.widget-control-save').on('click', function() { // check this is the right widget - probably using something like $(this).closest('form').width-field... // validate stuff }); }); 

Es ist ein bisschen schwierig, die ID aus dem Formular zu erhalten, da es dynamisch erstellt wird. Normalerweise benutze ich diesen JS, um ein Ereignis auszulösen, wenn die Schaltfläche zum Speichern gedrückt wird:

 jQuery(document).ready( function($) { $( '.widget-control-save' ).on( 'click', function() { // grab the ID of the save button var saveID = $( this ).attr( 'id' ); // grab the 'global' ID var ID = saveID.replace( /-savewidget/, '' ); } ); } ); 

Sie sind ein guter Typ und Sie verwenden get_field_id() und get_field_name() in get_field_name() Widget-Code, hm !?

 printf( '', $this->get_field_id( 'width' ), $this->get_field_name( 'width' ), (int) $instance['width'] ); 

Die ID Ihres Eingabefeldes ist etwas wie your-widget-name-[number]-width . Das Problem ist die Nummer. Sie unterscheidet sich jedes Mal, wenn Sie ein Widget zur Sidebar hinzufügen oder daraus entfernen. In der obigen JS hat die Variable ID nun den Wert your-widget-name-[number] (zB your-widget-name[2] ). Sie müssen also nur -width zur ID hinzufügen und können den Wert des Eingabefeldes nutzen

 var width = $( '#' + ID + '-width' ). val(); // validate the value of the input field with parseInt() or something else 

Aber wenn ich eine Zahl erwarte, würde ich den Benutzer keine Zeichen eingeben lassen. Es ist kein Problem zu verhindern, dass der Benutzer Zeichen eingibt.

 add_filter( 'widget_form_callback', 'prevent_char_input', 1, 2 ); function prevent_char_input( $instance, $object ) { // assuming your widgets id is 'foo_widget' if ( 'foo_widget' !== $object->id_base || ! is_integer( $object->number ) ) return $instance; echo " "; return $instance; } 

Also, was wir hier machen, ist das Drucken einiger Inline-Skripte. Die PHP-function prüft jedes Mal, wenn ein HTML-Formular in einem Widget gedruckt wird, ob der Widget-Name übereinstimmt und ob die Widget-Nummer eine Ganzzahl ist. Wir verwenden die Objekteigenschaften id_base und id . Die id_base ist die ID, die Sie bei der Registrierung des Widgets verwenden. Die id ist die Widget-ID plus die Nummer in der Seitenleiste (zB foo_widget-2 ).

Es empfiehlt sich, das Inline-Skript zu vermeiden. Sie können eine jQuery-Erweiterung erstellen und sie in die Fußzeile einfügen. Dies reduziert das Inline-Skript auf $( '#widget-{$object->id}-width' ).numbersOnly(); und im Javascript etwas wie:

 (function( $ ){ $.fn.numbersOnly = function() { this.keydown(function() { [... code here ...] }); }; })( jQuery ); 

Ich hoffe, das hilft Ihnen ein wenig, die beste Lösung zu finden.

Dies ist nicht WP-spezifisch.

Ihr Widget hat höchstwahrscheinlich bereits ein Formular. Dieses Formular hat einen Namen / eine ID (falls nicht, geben Sie einen Namen).

Was Sie tun möchten, ist das onsubmit des Formulars für bestimmte Bedingungen zu überprüfen.

Angenommen, das ist deine Form:

 
...

Ändern Sie zuerst das Formular wie folgt:

 

Stellen Sie dann die folgende JavaScript-function bereit (entweder in einer separaten JS-Datei, die in die Warteschlange eingereiht oder fest codiert werden muss):

Einfaches JavaScript

 function validateMyWidgetForm() { var msg = ""; if (document.forms["myWidgetForm"]["width"].value < 400) msg = msg + "The value of 'width' has to be greater than 400.\n"; if (document.forms["myWidgetForm"]["height"].value < 600) msg = msg + "The value of 'height' has to be greater than 600.\n"; ... if ("" != msg) { alert(msg); return false; } return true; } 

Hinweis : Die obige function ist nicht zum Kopieren und Einfügen geeignet, sondern nur zu Demonstrationszwecken.


Alternative jQuery- Version

 function validateMyWidgetForm() { var msg = ""; if (jQuery('#myWidgetForm #width').val() < 400) msg = msg + "The value of 'width' has to be greater than 400.\n"; if (jQuery('#myWidgetForm #height').val() < 600) msg = msg + "The value of 'height' has to be greater than 600.\n"; ... if ("" != msg) { alert(msg); return false; } return true; }