Form

[MooTools] Form.Validator.addAllThese for Japanese

2010/03/02 MooTools No comments , ,

MooToolsのForm.Validatorの足りないところを補う日本語環境向けaddAllThese。中身は殆どzeromailからの転載。
全角チェック、全てひらがな、全てカタカナ、全て全角数字、全て全角英数、日本語の有無、郵便番号、電話番号。
続きに郵便番号検索APIとの連携例と、Form.Validatorを搭載したメールフォームのデモがあります。

Form.Validator.addAllThese([
	['isJpOnly',
		{
			errorMsg:'全て半角英数の文字列は使用できません。',
			test: function(el){if(el.value.length == 0) return true; else return !el.get('value').test(/^[\x01-\x7e]+$/,'i');}
		}
	],
	['isNoAlp',
		{
			errorMsg:'全て全角で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[^ -~。-゚]*$/);}
		}
	],
	['isHirakana',
		{
			errorMsg:'全てひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[あ-ん]+$/,'i');}
		}
	],
	['isKatakana',
		{
			errorMsg:'全てカタカナで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ン]+$/,'i');}
		}
	],
	['isZNum',
		{
			errorMsg:'全て全角数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9]+$/,'i');}
		}
	],
	['isZAlp',
		{
			errorMsg:'全て全角英数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9A-Z]+$/,'i');}
		}
	],
	['isKana',
		{
			errorMsg:'カタカナもしくはひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ンあ-ん]+$/,'i');}
		}
	],
	['validate-zipcode',
		{
			errorMsg:'郵便番号の書式に誤りがあります。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/(^\d{3}\-\d{4}$)|(^\d{7}$)/);}
		}
	],
	['validate-tel',
		{
			errorMsg:'電話番号の書式に誤りがあります。',
			test:function(el){
				var value = el.get('value');
				if(value.length == 0) return true;
				
				if(el.get('value').test("-")){
					if(value.test(/^(090|080|070)/)){
						return value.test(/(^(090|080|070)(\-\d{4}\-\d{4})$)|(^[\d\-]{13}$)/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120(\-\d{2,3}\-\d{3,4}|[\d\-]{12})$)|(^0080\-\d{3}\-\d{4}$)/);
					}else{
						return value.test(/(^\d{2,5}?\-\d{1,4}?\-\d{4}$|^[\d\-]{12}$)/);
					}
				}else{
					if(value.test(/^(090|080|070)/)){
						return value.test(/^(090|080|070)\d{8}$/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120\d{6}$)|(^0080\d{7}$)/);
					}else{
						return value.test(/^\d{10}$/);
					}
				}
			}
		}
	]
]);

電話番号の正規表現修正

(さらに…)

[css] フォームのボタンをスタイルシートで画像ボタンに変更する

2009/09/14 CSS No comments ,

フォームのボタンについては以前、buttonタグにボタン画像をそのまま入れるという手法を書きましたが、
もう一つ、ボタンの見た目をCSSで変更する手法がございます。
この記事ではCSSでスタイリッシュなフォームボタンを作る方法について解説します。

メリットとしては、ロールオーバーアクションをCSSで制御出来るという点と、
タイプ属性にimageを指定しないので、送信やリセットなどの機能を殺さないという点があります。
ただし、CSSでのロールオーバーはIE6未対応なので、気になる方はJavascriptと併用してください。
(個人的にはスルーしても問題ないと思っています)

(X)HTMLソース

buttonとinputどっちでもOK

<button id="submit" type="submit">Submit</button>
<input id="submit" type="submit" value="" />

ボタンの画像

上がマウスアウト、下がマウスオーバーになるよう、繋げて作る。

btn_submit

CSS

上記の画像を基にしたスタイルシートです。

#submit {
	display:block;
	width:100px;
	height:30px;
	padding:0;
	border:0;
	background:url(btn_submit.png) no-repeat left top;
	text-indent:-9898px;
	font-size: 0px;
	line-height: 0px;
	cursor:pointer;
}
#submit:hover,
#submit:focus {
	background-position:left -30px;
}

CSSのポイント解説

上記CSSに書いてある以下のプロパティはIE対策です。

  1. display:block;
  2. font-size: 0px;
  3. line-height: 0px;

コレがないとボタンが表示されないばかりか、text-indentをマイナスにしている場合にウィンドウが横に伸びるというような事態に陥ります。
画像を背景だけにして文字を表示する場合は、text-indent:0、font-size削除か任意の値、line-heightはheightと同じ値にすればOK。

[js] 文字列を縦書きに変換する

2009/08/19 Javascript No comments

テキストエリアに入力された文字列を縦書きに変換して表示するjavascriptソース。
縦書きになる商品を注文するフォームのプレビューや、縦書きソース作成なんかに便利かもしれない。

<input type="text" id="text" size="30" />
<div id="preview"></div>
var inputArea,preview;
window.onload = function(){
	inputArea = document.getElementById("syuuha");
	preview = document.getElementById("preview");
	inputArea.onkeyup = function(){
		preview.innerHTML = TextSlice(this.value);
	}
}
function TextSlice(txt){
	var max = txt.length;
	var array = [];
	for (i = 0; i < max ; i++) {
		var str = txt.charAt(i);
		array.push(str);
	}
	return array.join("<br />");
}

文字列をバラして作った配列を改行タグで繋いでるだけなので、句点や小文字の処理とかは特にしてません。
divをtextareaにして、preview.innerHTMLをpreview.valueにすると、縦書きのhtmlソースが取得出来ます。

[mootools]セレクトメニューを連動させて動的に選択肢を変更する

2009/06/12 MooTools No comments

セレクトメニューが2つあって、1つ目のセレクトメニューを選択したら、その値によって2つ目のセレクトメニューの選択肢を入れ替えるというものです。
わざわざ何番煎じか分からないネタを遇えて取り上げたのは、巷でよく見かける「配列にデータを入れて出力する」という方法ではなく、Validなソースでこれをやりたかったためです。
選択肢がやたらと多くなりがちなもの、たとえば県から市を選んだりするフォームなどでよく使われていると思います。
とりあえずセレクトメニュー2つだけ連動させてみました。

XHTML

連動させるセレクトメニューにそれぞれIDが必要。
親セレクトメニューのoption要素につけたクラス名と、子セレクトメニューのoptgroup要素のクラス名を同じにします。
optgroup内に入れた要素が選択された時に入れ替わる選択肢になります。

<label for="select">選択肢1</label>
<select name="select" id="select">
	<option value="果物" class="fruit">果物</option>
	<option value="肉" class="meat">肉</option>
	<option value="魚" class="fish">魚</option>
</select>
<label for="select2">選択肢2</label>
<select name="select2" id="select2">
	<optgroup class="fruit" label="果物">
	<option value="リンゴ" selected="selected">リンゴ</option>
	<option value="みかん">みかん</option>
	<option value="ぶどう">ぶどう</option>
	<option value="桃">桃</option>
	</optgroup>
	<optgroup class="meat" label="肉">
	<option value="m1">牛肉</option>
	<option value="m2">豚肉</option>
	<option value="m3">鶏肉</option>
	</optgroup>
	<optgroup class="fish" label="魚">
	<option value="maguro">マグロ</option>
	<option value="sisyamo">ししゃも</option>
	<option value="iwashi">イワシ</option>
	<option value="sanma">サンマ</option>
	</optgroup>
</select>

見ての通り普通にソース書くのとそう変わらんので、javscriptオフでもフォームは機能します。
option要素を持たないselectを作る必要もないからバリデートに怒られる心配もない。
optgroupのラベルはどっちでもいい。
(さらに…)

[JS]Enterキーでのフォーム送信を抑止&javascript実行

2008/07/03 Javascript 1 comment

フォームは送信したくないんだけどテキストエリアでEnter押したら関数は実行したい、っていうシーンに。
Javascirptを使うので、オフにされてる場合は無効。

Enterでの送信をさせたくない場合は、Formタグを次のようにする。

<form action="" method="post" onSubmit="return false;">

onSubmit="return false;"を入れるだけで送信できなくなります。

テキストエリアでEnterを押した場合に、関数を実行させたい場合は次のようにする。

<input type="text" name="test" size="20" onkeydown="if(event.keyCode == 13){testFnc(this.value);}" />
function testFnc(str){
alert(str);
}

keyCodeの値を変更すれば他のキーを押したときに変更出来る。