Validierung benutzerdefinierter Meta-Box-Werte und erforderlicher Felder


16

Was ich noch nie gesehen habe, ist die beste Methode, um zu überprüfen, ob bestimmte Formularfelder für benutzerdefinierte Post-Typ-Metafelder korrekt ausgefüllt sind.

Ich möchte Expertenmeinungen darüber einholen, wie benutzerdefinierte Felder für möglicherweise erstellte Metaboxen am besten validiert werden können. Mein Interesse gilt:

  • Stellen Sie sicher, dass die Feldvalidierung erfolgt, bevor der Beitrag veröffentlicht / aktualisiert wird
  • Verwendung einer Klasse / eines Codes, die / der nicht mit anderem WordPress-Javascript in Konflikt steht
  • Mit dieser Option können Sie bestimmte Felder nach Bedarf definieren, während andere optional sein können
  • Validieren Sie Felder anhand anpassbarer Regeln, einschließlich regulärer Ausdrücke für E-Mail-Formate
  • Kontrollieren Sie die visuelle Anzeige von Fehlern / Hinweisen

Danke im Voraus!

Antworten:


21

Am einfachsten ist es, die Javascript-Validierung über das Plugin jQuery Validate hinzuzufügen . Hier ist die grundlegendste Anleitung:

Rufen Sie neben Ihrem Aufruf von add_meta_box das Plugin jQuery Validate sowie eine JS-Datei für Ihr einfaches Skript auf:

add_action('admin_enqueue_scripts', 'add_my_js');   
function add_my_js(){    
  wp_enqueue_script('my_validate', 'path/to/jquery.validate.min.js', array('jquery'));
  wp_enqueue_script('my_script_js', 'path/to/my_script.js');
}

Fügen Sie dann in my_script.js Folgendes ein:

jQuery().ready(function() {
    jQuery("#post").validate();
});

Dadurch wird die Validierung auf dem Post-Formular aktiviert. Anschließend fügen Sie im Rückruf "add_meta_box", in dem Sie die benutzerdefinierten Felder definieren, eine "erforderliche" Klasse für jedes Feld hinzu, das Sie validieren möchten.

<input type="text" name="my_custom_text_field" class="required"/>

Alle Felder mit "Erforderlich" in ihrer Klasse werden validiert, wenn der Beitrag gespeichert / veröffentlicht / aktualisiert wird. Alle anderen Validierungsoptionen (Regeln, Fehlerstyling usw.) können in der Funktion document.ready in my_script.js festgelegt werden. Überprüfen Sie die jQuery Validate-Dokumente auf alle Optionen.


Vielen Dank, ich werde es morgen versuchen, aber können Sie bitte erläutern, wie verschiedene Validierungen durchgeführt werden. Zum Beispiel die Überprüfung einer korrekten E-Mail-Adresse, die Überprüfung, dass es nicht mehr als oder mindestens XX Zeichen gibt, dass ein Formularfeld ausgefüllt ist ... solche Dinge?
NetConstructor.com

Wird dies auch überprüft, bevor der Beitrag gespeichert / aktualisiert wird? Wenn nicht, wie kann ich das machen?
NetConstructor.com

Die Beispiele und die Dokumentation für das Plug-in für die jQuery-Validierung (in meiner Antwort verlinkt) zeigen Ihnen, wie Sie all diese Dinge tun. Die Validierung erfolgt standardmäßig beim Senden. Sie können sie jedoch bei Unschärfe oder Änderung für jedes Formularelement in Ihren benutzerdefinierten Feldern auslösen.
Danblaker

Ich habe diese Lösung implementiert und sie sieht sehr vielversprechend aus. Ein Problem: Was muss ich in den 'submitHandler' einfügen? Nach der Validierung mit jquery.validate führt Wordpress nichts aus (save buttun bleibt im animierten Zustand). Wie gebe ich das Baby an WP zurück?
mike23

2
Wenn Sie nur versuchen, die Schaltfläche "Veröffentlichen" wieder in den normalen Zustand zu versetzen, wenn ein erforderliches Feld leer ist (oder eine andere Überprüfung fehlschlägt), sollten Sie mit dem submitHandler nichts tun müssen. Bearbeiten Sie einfach den validate () - Code, um die Schaltfläche zu ändern, wenn die Validierung fehlschlägt. Dies funktioniert wie folgt: jQuery ("# ​​post"). Validate ({invalidHandler: function () {jQuery ('# publish'). RemoveClass ('button-primary-disabled'); jQuery ('# ajax-loading'). Css ("Sichtbarkeit", "versteckt");}});
Danblaker

2

Der vollständige Basiscode zum Hinzufügen der jQuery-Validierung:

  1. Stellen Sie das Validierungsskript in die Warteschlange. Ich gehe davon aus, dass jQuery bereits benötigt wird.

    add_action('admin_enqueue_scripts',function($id){
        $validation',$validation_js_url = #your validation.js source;
        wp_register_script( 'validation',$validation_js_url,array(),'',true );
        wp_enqueue_script( 'validation' );
    });
  2. Im js-Datei- oder Skript-Tag:

    jQuery(document).ready(function($){
        var form = $("form[name='post']");
        $(form).find("input[type='submit']").click(function(e){
            e.preventDefault();
            $(form).validate();
    
            if($(form).valid())
            {
                $("#ajax-loading").show();
                $(form).submit();
            }else{
                $("#publish").removeClass().addClass("button-primary");
                $("#ajax-loading").hide();
            }
        });
    });
  3. Erledigt :)


Was ist mit auf der Serverseite?
NetConstructor.com

2

Ich habe diesen Code benutzt, sehr hilfreich, nur geändert:

$(form).find("input[type='submit']").click(function(e){

Zu:

$(form).find("#publish").click(function(e){

Denn wenn Sie ein anderes Formular im Hauptformular haben, starten Sie das Skript.

Und:

$(form).submit();

Zu:

$(this).submit();

Weil die erste Zeile nur den Beitrag als Entwurf speichert und Sie ihn nicht mehr veröffentlichen können.

Alles hier geschrieben: http://allgraphics.it/blog/2012/10/jquery-validation-sui-campi-di-input-postcustom-post-di-wordpress/


2

Ich habe diesen Ansatz gefunden, um das Problem der Validierung von Metabox-Feldern mit PHP-Code zu lösen

https://tommcfarlin.com/post-meta-data-error-messages/

Hoffe das hilft dir (funktioniert bei mir in einem ähnlichen Szenario)


Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier einzuschließen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verlinkte Seite ändert.
Gabriel

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.