Synergy Basicでリアルタイムバリデーションメールフォームを作る:その2

2014/12/10 2016/1/25 JS/jQuery, UI/UX

前回は「データベースの作成」→「作成した項目をフォームに紐づける」という所まで終わりました。
今回はHTML、CSS、jQueryを使ったUI制作に入りたいと思います。

まずは最初に「郵便番号検索機能」をONにします。

この郵便番号検索機能は「郵便番号を入力」→「検索ボタン押下」で自動で住所が入力されるスグレモノです。1から作るにはajaxzip3などを使う必要がありますが、Synergyなら設定一つで出来ちゃいます。ユーザーの入力補助という面で非常に強力なツールですのでぜひ利用しましょう。

制作の準備

設定が完了したら、作成したhtmlをSynergyの管理画面からダウンロードしてみたいと思います。
制作はこのダウンロードしたファイルをいじって作成する事になります。
同じ様に、確認、完了のhtmlをダウンロードしておきます。
ソースを見てみるとそれぞれのinputのname値にパラメータが設置されています。

<input type="text" id="corporate" name="singleAnswer(ANSWER1)" value="" />

これは前回やったデータベースとフォームの紐付けがされている部分ですので触らない様にしましょう。
ファイルタイプはSJIS、CR+LFで進める様にと記載されていますので気をつけましょう。

バリデーション構築

さぁ準備ができたら、構築へ。
今回はバリデーョン部分に以下のプラグインを使用します。
5509さんが作成したプラグイン「exValidation」です。現在はブログサイトが閉鎖されて解説等見れませんが、(ずっと拝見していたので非常に残念。)gitHubでソースは公開されています。日本語対応でカスタマイズ用のオプション豊富。スタイルも2種類有り非常に使い勝手がいいです。

使い方

基本的な使い方は下記ソースの様に「var validation」にformタグを指定し、それぞれのinputにidを設定してあげるだけです。
名前やアドレス入力の際、2つに分けたい場合はinputをspanで囲んであげると機能します。
jQueryのバージョン等はサンプルと近いものにするのが無難だと思います。
エラーのコメントを変更したい場合は「exchecker-ja.js」の中の日本語を変えてあげましょう。

Demo

//chkrequired→バリデーションをかける項目(必須項目)
//chkgroup→spanで囲む2つのinputを持っている場合
//chkkatakana→カタカナ入力
//chkemail→メール形式
//chkradio→ラジオボタン
//chkcheckbox→チェックボックス
//chkselect→セレクトボックス
//などなど...
	var validation = $("form")
		.submit(function() {
			return false;
		})
		.exValidation({
			firstValidate: true,
			rules: {
				name: "chkrequired",//#nameに対してオプションを設定
				kana: "chkrequired chkkatakana",
				email: "chkrequired chkemail chkhankaku chkgroup",
				email3: "chkrequired chkemail chkhankaku",
				pass: "chkrequired chkmin6 chkmax12",
				repass: "chkrequired chkretype-pass",
				url: "chkrequired chkurl",
				radio: "chkradio",
				street: "chkgroupt chkrequired",
				checkbox: "chkcheckbox",
				pref: "chkselect",
				file: "chkfile"
			},
			stepValidation: true
		});
	});

このまま使っても非常にユーザービリティーが高いですが、
自分が良くやるカスタマイズを以下に列挙しました。

カスタマイズその1：メルマガ(`checkbox:checked`)で必須項目を増やす。

例えば、メルマガのチェックボックスがあり、チェックした人にだけアドレスを必須にしたい場合など、checkboxがcheckedになった際に必須項目を増やす事ができます。
チェックした際にはpopupなどで入力を促すコメントをだすと良いでしょう。
下記demoサイトでは通常submitを押してもバリデーションはかかりませんが、チェックボックスotherをcheckedにすると項目Favorite Otherが必須項目に変化します。

Demo

カスタマイズその2：入力完了で`addClass`、エラーで`removeClass`

例えば、入力が完了したらチェックマークの画像を表示する、エラーの場合はその画像を消すなどしたい場合は直接ソースに書いていきましょう。また上記郵便番号検索を使用している場合は検索ボタンが押下された際にもfunctionされる様にしておきましょう。
例えば446行目辺りに「_t.addClass("err");」があります。これはエラーがある場合に実行するメソッドです。それと同じタイミングで実行させたいソースがあれば改行して任意のソースを入れるといいでしょう。その逆で492行目辺り「_t.removeClass("err");」はそのクラスを削除するものです。このタイミングで機能させたいソースはこちらに。

カスタマイズその3：ユーザー離脱時にpopup

これはクライアントからの要望が多い機能です。ユーザーにとっては「ウザイ」かもしれない！？機能ですが、
入力途中でウインドウを削除してしまったら一大事です。人によっては入力する気すら失せるでしょう。beforeunloadをつかいます。

   $(window).on('beforeunload', function() {
        return '投稿が完了していません。このまま移動しますか？';
    });

カスタマイズその4：入力完了数をカウントし、残りのエラー数を数える

上記の機能に付与してあげるといいでしょう。ちゃんと入力したつもりで気づかないユーザーもいるかもしれません。カスタマイズその2でvalidateのフラグをつけて個数をカウントしてあげるといいと思います。

    $(window).on('beforeunload',function(){
		var n = $(".validateFlag").length;
		if(n==0){
			return('入力が完了しています。');
		}else{
			return('入力が完了しておりません。\n未入力箇所 :'+ n +'箇所');
		}
    });

レスポンシブ対応の場合の注意点

プラグインの性質上いろんなイベント時にバリデーションがかかりますが、その中でも.keyup()というイベントがあります。
android機種の一部にそのイベントが点火しない物がありますので
検証端末にandroidがある場合は確認しましょう。(focus時にも点火するのでそれほど気になる物ではないとは思います。)

Synergy側のサーバーにアップ

上記構築、CSSの設定が完了したらSynergyにアップします。ローカルでの作業中は関係ありませんが、本番環境(Synergy)にアップする場合
外部ファイルは全てSynergy側にアップロードすることになります。
下記管理ページのアップローダーでアップするので外部ファイルはフルパスで読み込む事になりますのでアップ時には変更しましょう。