フォームの入力チェックをする方法

注意点
自作ページのみ対応です。
携帯用のページではご利用になれません。

指定のプログラム(Javascript)をフォームに設定いただくことで
入力確認画面に進む前にフォームの入力内容(未入力や形式)を
チェックできます。

▼こちらで動作テストが行えます。
http://autobiz.jp/js/formCheck.html

▼設定方法をPDFでご覧になりたい方はこちら
http://autobiz.jp/dl/validate_manual.pdf

<body>~</body>の間に、JavaScriptのソースを埋め込みます

・入力チェックをしたい項目のみを fld['部品名'] = "チェック方法"; としてください。
・入力エラーが合った場合の色は reqcolor = "#ffe5f2"; で設定します。
・入力エラーが解除された場合の色は encolor = "#ffffff" で設定します。

<script src="https://ssl24.net/js/formCheck.js">
</script>
<script>
<!--
fld = new Array();
fld['name1'] = "required";
reqcolor = "#ffe5f2";
encolor = "#ffffff";
-->
</script>

入力必須+形式のチェック

"required"入力必須
"mail"メールアドレスがa@a.a~の形式以外はエラー
"tel"電話番号が0-0-0の形式以外はエラー
"url"URLがhttp://a~,https://a~,ftp://a~の形式以外はエラー
"postcode"郵便番号が000-0000の形式以外はエラー
"alphanum"半角英数以外はエラー
"alphanum_option"半角英数(ドット『.』、ハイフン『-』、アンダーバー『_』も使用可能)以外はエラー
"check"単一のチェックボックスにチェックがされていなければエラー
"check_many"複数あるチェックボックスのうち、1つ以上チェックされていなければエラー
"radio"ラジオボタンが選択されていなければエラー
"select"セレクトボックスが選択されていなければエラー(規定値が「選択してください」等になっている場合のみ)
"birth"日付が0/0/0/の形式以外はエラー
"count,min,max,type"指定文字数内以外ならエラー
min → 最小文字数
max → 最大文字数
type → an:半角英数のみ
    →ano:半角英数(ドット『.』、ハイフン『-』、アンダーバー『_』も使用可能)

形式のチェック(入力されたときだけ形式のチェックをします)

"zen"全角以外の文字が入力されていればエラー
"spostcode"郵便番号が000-0000の形式以外はエラー
"surl"URLがhttp://a~,https://a~,ftp://a~の形式以外はエラー
"stel"電話番号が0-0-0の形式以外はエラー

<form>タグに、入力チェックプログラムの呼び出しを追加します

フォームの登録ボタンを押したときに、プログラムが呼び出されます。
呼び出すための記述は以下の通りです。

onSubmit = "return FromCheck(fld,reqcolor,encolor)"

■例:
<form action="https://××auto.biz/アカウント名/stepmail.php" method="post" onSubmit="return FormCheck(fld,reqcolor,encolor)">

入力チェックをする項目のtitle属性に、
エラー時に表示させたいメッセージを入れます

■例:
<input type="text" name="name1" title="姓を入力してください">

コメントを残す