FuelPHP jQuery

jQueryのexValidationで簡単バリデーション

更新日:

jQueryのexValidationというプラグインがとても便利ですので、ご紹介したいと思います。併せてjQeury Mobileのフォームの中で、exValidationを使う方法もご紹介したいと思います。exValidationの詳細な使い方については、作者nori様のサイト5509のページをご覧下さい。

1. それでは、まず、ダウンロード方法から、ご紹介します。githubの5509/exvalidationのページへ移動します。

2. downloadsのタブをクリックし、『Download as zip』のボタンをクリックして、ローカルの適当な箇所にダウンロードします。

3. 解凍したzipファイルを見てみます。scriptsフォルダ、skinフォルダ、stylesフォルダといくつかのファイルがあります。exValidationに必要なファイルはstylesフォルダ内の、『exvalidation.css』とscriptsフォルダ内の『jquery.js』、『exvalidation.js』、『exchecker-ja.js』の4つです。付属の『jquery.js』はv.1.6.2ですが、最新のバージョンが使えるかどうかは検証が必要だと思います。

4. 普通の使い方は、nori様のサイトを参考にしていただければ分かると思いますので、ここからは、前回同様FuelPHP内でjQuery Mobileを使いながら、exValidationでバリデーション処理をする方法をご紹介したいと思います。

5. public/assets/css内に、exvalidation.cssをコピーします。public/assets/js内に、exvalidation.min.jsとexcheker-ja.min.jsの2つのファイルをコピーします。jqueryのファイルは前回、jquery-1.6.4.min.jsをjquery.min.js名で保存したファイルを使用してみたいと思います。

6. それでは、とりあえず前回作成したコントローラにformメソッドを作成します。formメソッドでビューファイルを表示するだけでは、あまりにも面白くないので、CSSファイルと、jsファイルを多次元配列として渡してみたいと思います。

fuel/app/classes/controller/sample6.php

<?php
 class Controller_Sample6 extends Controller{
 public function action_index(){
 $data=array(
 'title'=>'FulePHPでスマホサイト',
 'site_name'=>'WinRoad徒然草',
 'footer'=>'@2012 winroad',
 );
 $view=View::forge('sample6/index',$data);
 return $view;
 }
 //フォームを表示するためのメソッド
 public function action_form(){
 $data=array(
 'title'=>'FulePHPでスマホサイト',
 'site_name'=>'WinRoad徒然草',
 'footer'=>'@2012 winroad',
 'css'=>array('jquery.mobile.min.css',
 'exvalidation.css'),
 'js'=>array('jquery.min.js',
 'jquery.mobile.min.js',
 'exvalidation.min.js',
 'exchecker-ja.min.js'),
 );
 $view=View::forge('sample6/form',$data);
 return $view;
 }
 }

7. 次にビューファイルform.phpを作成します。

fuel/app/views/sample6/form.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<title><?=$title?></title>
<?php echo Asset::css($css)?>
<?php echo Asset::js($js)?>
<body>
<div data-role="page" id="page1">
 <div data-role="header">
 <h1><?=$site_name?></h1>
 </div>
<form action="" method="post">
 <div data-role="content">
 <fieldset data-role="controlgroup">
 <label for="name">名前</label>
 <input type="text" name="name" id="name" value="">
 <label for="kana">読み(カタカナ)</label>
 <input type="text" name="kana" id="kana" value="">
 </fieldset>
 <label for="email">メールアドレス</label>
 <input type="text" name="email" id="email" value="">
 <label for="password">パスワード</label>
 <input type="password" name="password" id="password" value="">
 <label for="repassword">パスワードの再入力</label>
 <input type="password" name="repassword" id="repassword" value="">
 <fieldset data-role="controlgroup" data-type="horizontal">
 <legend>性別</legend>
 <span class="chkradio" id="gender">
 <input type="radio" name="gender" id="gender-male" value="男性">
 <label for="gender-male">男性</label>
 <input type="radio" name="gender" id="gender-female" value="女性">
 <label for="gender-female">女性</label>
 </span>
 </fieldset>
 <input type="submit" value="登録" data-theme="b">
 </div>
</form>
 <div data-role="footer">
 <h4><?=$footer?></h4>
 </div>
</div>
<script type="text/javascript">
 var validation = $("form")
 .exValidation({
 rules: {
 name: "chkrequired",
 kana: "chkrequired chkkatakana",
 email: "chkrequired chkemail chkhankaku",
 password: "chkrequired chkmin6 chkmax16",
 repassword: "chkrequired chkretype-password",
 },
 errInsertPos: 'before',
 errPosition: 'fixed'
 });
 var selectable = $('#pref').selectable({
 callback: function() {
 validation.laterCall('#pref');
 }
 });
</script>
</body>
</html>

8. それでは、『Mobilizer』で確認してみます。左のiphoneは、入力前、右のAndroidは、登録ボタンをクリック後です。

9. このようにjQuery Mobileをつかったサイトでは、FuelPHPでバリデーション処理をするよりも、exValidationを使って、バリデーション処理をするほうが、遙かに簡単で、便利です。

10. それでは、簡単に44行目から62行目までのスクリプトを説明してみたいと思います。exValidationは、『chk』で始まるclassをフォーム要素(グループの場合はspan等の要素)に割り振るか実行時に、rules:{}内に、バリデーションルールを記述します。

11. rules:{}内の指定の方法は、input要素内の『id名:"chkで始まるバリデーションルール名"』と記述するだけです。バリデーションルールは、スペースを挟んで記述することで複数記述することが出来ます。

12. 例えば、50行目のemailは必須項目の『chkrequired』とメールアドレスチェックの『chkmail』と全角禁止の『chkhankaku』という3つのバリデーションルールで指定されています。

13. 性別のラジオボタンに関しては、31行目から34行目をspan要素で囲って、クラス名にラジオボタンの必須項目である『class="chkradio"』を指定しています。このときにidは必ず指定しなければなりません(id名は任意)。

14. 54行目の『errorInsertPos』はエラーを表示する位置です。デフォルトはbody直下ですが、今回は、対象要素の前に指定しています。対象要素の後ろに指定するときは、『after』を指定します。

15. 55行目の『errPosition』は、『before』か『after』を指定した場合は、『fixed』を指定します。

16. exValidationには、いろいろなオプションがありますので、nori様のサイトを熟読下さい。

本日は以上です。

-FuelPHP, jQuery
-,

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.