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

解決済 so-taro
(@so-taro)

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

やりたいこと

　・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)

11年、 2ヶ月前
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)

11年、 2ヶ月前
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)

11年、 2ヶ月前

3件の返信を表示中 - 1 - 3件目 (全3件中)

トピック「WordPressでjQueryを使う方法(フォームバリデーション)」には新たに返信することはできません。

トピックタグ

表示