web-dev-qa-db-fra.com

Comment inclure jquery validate dans un template

J'essaie de charger les méthodes de validation de jquery dans mon fichier de modèle.

L'idée est de pouvoir exécuter quelque chose comme ceci:

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

Basé sur plusieurs articles, j'ai mis ceci dans mon fichier header.php:

<?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");

J'ai aussi essayé de simplement lier le fichier:

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

Dans les deux cas, l'erreur que je reçois est la suivante:

Uncaught ReferenceError: jQuery n'est pas défini

Dans le fichier jquery.validate.min.js.

Cela semble être dû au paramètre noConflict que wordpress utilise lors du chargement de jQuery, mais je n'arrive pas à comprendre comment le contourner.

Comment charger ce fichier de validation?

jquerywp-enqueue-script
2
paqogomez

Oui. Tu as raison. C'est à cause du mode jQuery noConflict.

Vous devez utiliser jQuery au lieu de $. Ou vous pouvez tout envelopper dans une fonction comme celle-ci pour définir sa portée

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

Basé sur plusieurs articles, j'ai mis ceci dans mon fichier header.php:

Pas dans header.php. Placez ce code dans votre fichier functions.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");

(Il y avait une parenthèse supplémentaire. J'ai enlevé cela)

2
sakibmoon