web-dev-qa-db-de.com

So fügen Sie jquery validate in eine Vorlage ein

Ich versuche, die Validierungsmethoden von jquery in meine Vorlagendatei zu laden.

Die Idee ist, so etwas ausführen zu können:

$jquery("#generateForm").validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit();
    },
    rules: {
                ...
        }
    },
     messages: {
                  ...
        }
    }
});

Basierend auf mehreren Beiträgen habe ich dies in meine header.php-Datei eingefügt:

<?php

    function add_my_js_files(){
        wp_enqueue_script('jquery-validate-min', 
                          get_stylesheet_directory_uri() . '/js/jquery.validate.min.js', 
                          array( 'jquery' )  ) );
    }
    add_action('wp_enqueue_scripts', "add_my_js_files");

Ich habe auch versucht, nur die Datei zu verlinken:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.min.js" 
        type="text/javascript">
</script>

In beiden Fällen ist der Fehler, den ich erhalte:

Nicht erfasster ReferenceError: jQuery ist nicht definiert

In der Datei jquery.validate.min.js.

Dies scheint auf den noConflict-Parameter zurückzuführen zu sein, den WordPress beim Laden von JQuery verwendet, aber ich kann anscheinend nicht herausfinden, wie ich damit umgehen soll.

Wie lade ich diese Validierungsdatei?

jquerywp-enqueue-script
2
paqogomez

Ja. Du hast recht. Dies liegt am jQuery noConflict-Modus.

Sie müssen jQuery anstelle von $ verwenden. Oder Sie können alles in eine Funktion wie diese einschließen, um den Gültigkeitsbereich zu definieren

(function($){
    $("#generateForm").validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit();
        },
        rules: {
                ...
            }
        },
        messages: {
                ...
            }
        }
    });
})(jQuery);

Basierend auf mehreren Beiträgen habe ich dies in meine header.php-Datei eingefügt:

Nicht in header.php. Fügen Sie diesen Code in Ihre functions.php-Datei ein.

function add_my_js_files(){
    wp_enqueue_script('jquery-validate-min', 
                      get_stylesheet_directory_uri() . '/js/jquery.validate.min.js', 
                      array( 'jquery' ) 
                     );
}
add_action('wp_enqueue_scripts', "add_my_js_files");

(Es gab zusätzliche Klammern. Das habe ich entfernt.)

2
sakibmoon