この部分のみの記載で、各項目に対する入力チェック、エラー発生時のメッセージ出力 などの処理が実施されます。
function input_check() {
//チェック用のデータ
var ckid = ["mandatory","email","tel"]; //必須、メール、電話番号チェックの実施
var ckitems = [ //チェック対象項目の id を指定、上記で指定した順番
["cm_subject","cm_name", "cm_email"],
["cm_email"],
["cm_tel"]
];
var ckmsg = [ //エラー発生時のメッセージを指定
"必須項目の入力をお願いします.",
"メールアドレスの入力に誤りがあります.",
"電話番号の入力に誤りがあります."
];
var msgid = "cm_message"; // メッセージ出力箇所の idを指定
var nchk = ckid.length;
for (var i = 0; i < nchk; i++){
if (!check_alls(ckid[i], ckitems[i], msgid, ckmsg[i])) {
return false;
}
}
return true;
}
以下がHTML部分 わかりやすくするため、スタイル定義やCSS部分は取り除いてあります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>入力テンプレート</title>
<script type="text/javascript" src="inputcheck.js"></script>
<!-- inputcheck.jsに入力チェック処理やcheck_alls関数を定義 -->
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<h2>お問合せフォーム</h2>
<form method="post" name="cm_form" action="アクション実施URL">
<table>
<tbody>
<tr>
<th><label for="cm_subject">項目(必須項目)</label></th>
<td><input type="text" id="cm_subject"></td>
</tr>
<tr>
<th><label for="cm_name">お名前(必須項目)</label></th>
<td><input type="text" id="cm_name"></td>
</tr>
<tr>
<th><label for="cm_email">メールアドレス(必須項目)</label></th>
<td><input type="email" id="cm_email"></td>
</tr>
<tr>
<th><label for="cm_tel">お電話番号</label></th>
<td><input type="tel" id="cm_tel"></td>
</tr>
<tr>
<th><label for="cm_contents">お問合せ内容</label></th>
<td><textarea textarea rows="3" cols="30" id="cm_contents"></textarea></td>
</tr>
</tbody>
</table>
<div id="cm_message"></div>
<input class="button" type="submit" id="cm_button" value="確 認 画 面" onClick="return input_check();">
</form>
</body>
</html>
Copyright(C) SIMPLEONE BLOG.(J.Yamada) 2020- All rights reserved.