バリデートのJavascriptを使いまわし用にまとめました！

Ajaxzip3、LiveFormValidation、autoKanaのJavascriptプラグインの読み込み

DEMOページ

<script src="//ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.autoKana.js"></script>

基本的に<head></head>内でOKですが
フォームのないページに無駄に読み込ませたくない場合は、
自身で分岐するなりしてフォームページのみで読み込んでください。

これ読み込んでる前提で処理書いてしまってるので
読み込んでおかないとエラー吐いちゃいますのでご注意を。

autoKana

LiveFormValidation

リンク貼っておいてなんですが
LiveFormValidationの方は中身いじってしまってるので公式から落としてきても使えるかどうか、確認してないだけなのでたぶん正常に動くかと。

フォームバリデート実行用のJavascriptの読み込み

<script type="text/javascript" src="js/form_alert.js"></script>
<script type="text/javascript" src="js/form.js"></script>

「form_alert.js」は正直任意でOKです。
後述しますが、ページ離脱時のアラートです。

form.js

form_alert.js

form_alert.js処理内容の説明

ページ離脱前にアラートを出す

// ページを離れる際のアラート
function onBeforeUnload(e) {
	return '';
}
$(function(){
	setTimeout( function() {
		window.onbeforeunload = onBeforeUnload;
	}, 100);
	$('a,:input').bind('click', function(){
		window.onbeforeunload = function(e) {};
		setTimeout( function() {
			window.onbeforeunload = onBeforeUnload;
		}, 100);
	});
});

form.js処理内容の説明

基本的なHTMLのマークアップ方法

<!-- IDが「err_(フォームのID)」のタグにエラーメッセージが出ます。 -->
<input type="text" name="example" id="test_form" />
<span id="err_test_form"></span>

もともとLiveFormValidationプラグインは
バリデートの設定をしたフォーム部品の直後にエラーメッセージが挿入される仕様でしたが
デザイン上、折り返し位置が変になったりとか、もっと自由な位置に挿入したかったため、
上記のような仕様にカスタマイズしました。

本来なら「err_(フォームのID)」がなければフォーム部品の直後に挿入する、
みたいな条件分岐書いた方がよかったんでしょうけど
なんだか面倒だったのでやってません。

時間ができたらやるかもしれません。

form.jsファイル内で、未入力時と、入力時の色を設定する

function bg1(){ return  '#fff';} // 通常背景
function bg2(){ return '#fcfcfc';} // グレー背景
function color1(){ return '#303030';} // 通常文字色
function color2(){ return '#a7a7a7';} // グレー文字色

1行目から上記のコードが書かれているので
デザインに合わせてカラーコードを変更してください。

ふりがな自動入力

<!-- 名前 -->
<input type="text" name="first" id="firstname" data-kana="firstname_kana" />
<span id="err_firstname"></span>

<!-- ふりがな -->
<input type="text" name="first_kana" id="firstname_kana" />
<span id="err_firstname_kana"></span>

漢字の名前を入力するテキストフィールドに
「data-kana」属性を付けて、ふりがなのテキストフィールドのIDを設定してやればOKです。

必須項目(テキストフィールド、テキストエリア、セレクトボックス）

<input type="text" class="required" />

<select class="required">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<textarea class="required"></textarea>

「required」っていうクラスを付けるだけです。

必須項目（チェックボックス、ラジオボタン）

<div id="radio_parent" class="required_check">
	<input type="radio" id="child1" value="1" /> 選択肢1
	<input type="radio" id="child2" value="2" /> 選択肢2
	<input type="radio" id="child3" value="3" /> 選択肢3
</div>
<span id="err_radio_parent"></span>

<div id="check_parent" class="required_check">
	<input type="checkbox" id="child1" value="1" /> 選択肢1
	<input type="checkbox" id="child2" value="2" /> 選択肢2
	<input type="checkbox" id="child3" value="3" /> 選択肢3
</div>
<span id="err_check_parent"></span>

「required_check」というクラスを付けた親要素で囲ってください。
この際、エラーを出力するためのIDはフォーム部品ではなく親要素のIDとなります。

半角数字のみ

<input type="text" class="num_init" />

「num_init」というクラスを付けるとフォーカスから外れた際に、
数字以外を削除し、全角数字は半角数字に変換します。

半角英数字のみ

<input type="text" class="alpnum_init" />

「alpnum_init」というクラスを付けるとフォーカスから外れた際に、
英語と数字以外を削除し、全角英数字は半角英数字に変換します。

メールアドレスで使える文字のみ

<input type="text" class="mail_init" />

「mail_init」というクラスを付けるとフォーカスから外れた際に、
メールアドレスで使える文字以外を削除し、全角は半角に変換します。

メールアドレス形式チェック

<input type="text" class="mail_check" />

「mail_check」というクラスを付けるとフォーカスから外れた際に、
メールアドレス形式の文字列なのかどうかチェックします。

電話番号形式チェック

<input type="text" class="tel_check" />

「tel_check」というクラスを付けるとフォーカスから外れた際に、
電話番号形式の文字列なのかどうかチェックします。

とか言って実は10文字以上かどうか調べてるだけです。
本来であればハイフン込みの正規表現したいんですが面倒なのでしてません。

半角数字のみのクラスと併用して設定するとハイフン自動で消すので許してください。

年月日のセレクトボックス

<div class="sel_init">
	<select class="sel_year">
		<option value=""></option>
		<option value="1951">1951</option>
		<option value="1952">1952</option>
		～
		<option value="2014">2014</option>
		<option value="2015">2015</option>
	</select> 年
	<select class="sel_month">
		<option value=""></option>
		<option value="1">1</option>
		<option value="2">2</option>
		～
		<option value="11">11</option>
		<option value="12">12</option>
	</select> 月
	<select class="sel_day">
		<option value=""></option>
		<option value="1">1</option>
		<option value="2">2</option>
		～
		<option value="30">30</option>
		<option value="31">31</option>
	</select> 日
</div>

親要素に「sel_init」というクラスを付けて、
年には「sel_year」、月には「sel_month」、日には「sel_day」というクラスを付けます。

年や月のセレクトボックスを変更した際に、
その月が31日なのか、30日なのか、28日なのか、取得して日のセレクトボックスの選択肢を変更します。
うるう年対策もバッチリよ！

郵便番号自動入力

<!-- 郵便番号 -->
〒 <input type="text" name="zip1" onchange="autoZip('zip1', '', 'pref', 'city');" maxlength="7" />

<!-- 郵便番号 3桁 - 4桁に分けた際 -->
〒 <input type="text" name="zip1" onchange="autoZip('zip1', 'zip2', 'pref', 'city');" maxlength="3" /> - <input type="text" name="zip1" onchange="autoZip('zip1', 'zip2', 'pref', 'city');" maxlength="4" />

<!-- 都道府県 -->
<select name="pref">
	<option value=""></option>
	<option value="1">北海道</option>
	<option value="2">青森県</option>
	…
	<option value="46">鹿児島県</option>
	<option value="47">沖縄県</option>
</select>

<!-- 市区町村以降 -->
<input type="text" name="city" />

郵便番号のテキストフィールドに、
onchangeで「autoZip(‘郵便番号’, ‘郵便番号２’, ‘都道府県’, ‘市区町村以降’);」として、
それぞれのname値を指定してください。

 

今後はもっと処理追加していきます。

とりあえず今回の案件の際に使ったものをまとめただけなので
他のものも順次使い回し用に追加していく予定ではあります。

ただ社内共有用に書いたというのが一番の目的なので
微調整せずにそのまま使えるかどうかといえば、どうなんでしょうか。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です