サポート » プラグイン » WordPressでjQueryを使う方法(フォームバリデーション)

  • 解決済 so-taro

    (@so-taro)


    はじめての投稿となります。
    本当に初歩的なことで気が引けますが、皆様ご教授ください。

    やりたいこと

     ・jQueryのフォームバリデーションExvalidationを設置したい
       http://5509.me/log/exvalidation

    やったこと

    ・ダウンロードしたexvalidation.css、exvalidation.js、exchecker-ja.jsをテーマのexフォルダーに置いた。
    ・テーマのheader.phpに、以下のコードを書き込んだ。

    <link rel="stylesheet" href="<?php bloginfo('template_directory');?>/ex/exvalidation.css" type="text/css" />
    <?php
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');
    wp_enqueue_script('exvalidation', get_bloginfo('template_url') . '/ex/exvalidation.js',array(jquery));
    wp_enqueue_script('exchecker', get_bloginfo('template_url') . '/ex/exchecker-ja.js',array(jquery));
    ?>
    
    <?php wp_head(); ?>
    
    <script>
    jQuery(function(){
      jQuery('form').validation();
    });
    </script>

    このあとどのようにしてexvalidationを使用するのか、作者様のページを見ても自身の理解力
    不足のため解決できずに困っています。
    どうぞよろしくお願いします。

    その他やったこと

    ・jQueryの設置方法を動作確認
      1.WordPressにイメージスライダーを付けてみよう
         http://webdesignrecipes.com/anythingslider-in-wordpress-with-jquery/#&panel1-2
      2.WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、
       動かない場合の対処例
         http://kachibito.net/web-design/wordpress-with-jquery.html
      3.書籍 WordPress2.7「導入&カスタマイズ」実践ガイドのWordpressでjQueryを使う
       の動作確認
      4.Wordpressで使用しているコードの検索(googleにて)
      5.Wordpressフォーラム内の検索

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • so-taroさん、こんにちは。

    WordPressのコメント欄を表示させている場合は動かないようなので、
    page.php(TwentyEleven)の
    <?php comments_template( ”, true ); ?>

    <?php /* comments_template( ”, true ); */ ?>
    にしてコメント欄を非表示にしてみてください。

    それから下記のコード

    <script>
    jQuery(function(){
      jQuery('form').validation();
    });
    </script>

    をheader.phpではなく、
    footer.phpに書いてみてください。
    読み込ませる場所によって動作しないようです。

    また、adminbar が出ているときも動作しないようなので、
    一度ログアウトしてからプレビューして頂けますか。

    ryu263様、ありがとうございます!
    コメント欄の非表示、footerへの変更によってうまく表示できました。

    <script>
    jQuery(function()
    {
      jQuery('#form')
      .exValidation
      ({
      	firstValidate: true,
      	rules:
      	{
      		name:'chkrequired chkzenkaku',
      		name2:'chkhankaku'
    	},
      	stepValidation: true
      });
    });
    </script>

    動作が安定しないと思っていたら、「adminbar が出ているときも動作しない」ということもあるのですね。

    当方ではadminbarは必要なかったのでhttp://8bitodyssey.com/archives/3285を参考にしてfunction.phpに下記を追加しました。

    /**
    * 管理バーを表示しない
    * @return boolean
    */
    function mytheme_kill_admin_bar(){
        return false;
    }
    // show_admin_barにフィルターする。最後に処理してもらいたいので、1,000番目に登録。
    add_filter( 'show_admin_bar', 'mytheme_kill_admin_bar' , 1000 );

    本当にありがとうございました!!

    スレッド開始 so-taro

    (@so-taro)

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「WordPressでjQueryを使う方法(フォームバリデーション)」には新たに返信することはできません。