トップページ > 管理メニューから探す > 登録ページ作成 > その他の設定 > フォームの入力チェックをする方法

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

※自作ページのみ対応です。

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

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

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

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

 

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

 

・入力チェックをしたい項目のみを 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="姓を入力してください">

関連記事