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

※自作ページでのみ、ご利用いただけます。

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

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

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

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

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

チェック方法は以下の通りです。

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

"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="姓を入力してください">

関連記事

コメントを残す