WordPressでjQueryを使う方法(フォームバリデーション)

  • 解決済 so-taro

    (@so-taro)


    12年、 9ヶ月前

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

    やりたいこと

    　・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件中)
  • Ryujiro Yamamoto

    (@ryu263)

    12年、 9ヶ月前

    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 が出ているときも動作しないようなので、
    一度ログアウトしてからプレビューして頂けますか。

    zilchr2

    (@zilchr2)

    12年、 9ヶ月前

    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)

    12年、 9ヶ月前

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