※ ChatGPTを利用し、要約された質問です(原文:エラーチェックの送信について)
エラーチェックの送信について
このQ&Aのポイント
エラーメッセージが消える問題を解決したい
JS入力チェックサンプルのコードを使用している
エラーチェックが完了したら送信できるようにしたい
下記のようなコードでエラーチェックを行い、エラーがなければ送信というシステムを書いています。
しかし、下記のような現象が起きます。
・エラーチェックをし、エラーメッセージが出力されるが、表示されるダイアログを消すとエラーメッセージも消えてしまう。
これをエラーメッセージを残したままにしたいと考えています。
何卒よろしくお願い致します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS入力チェックサンプル</title>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="el_validation.js"></script>
<style type="text/css">
.custom_error {
background-color:#a00;
}}
</style>
<script>
// 初期化
$(document).ready(function(){
$.el_valid.init({
// 各種入力チェック
"item01":{"rule":["required"]},
// 複合、チェックタイミングの指定
"item_a0":{"rule":["required","min_length[5]","max_length[10]"]}, // 複数のバリデーション
"item_a1":{"rule":["required","url"], "on":"blur"}, // フォーカス移動時のみチェック
"item_a2":{"rule":["required","email"], "on":"blur"}, // フォーカス移動時のみチェック
"item_a3":{"rule":["required","tel"]}, // フォーカス移動時のみチェック
// エラーの出力場所、表示方法変更
"item_b1":{"rule":["required"], "err":"item_b1_error"}, // エラー場所指定
"item_b2":{"rule":["required"], "err_class":"custom_error"}, // エラークラス指定
"item_b3":{"rule":["required"], "err":"item_b3_error", "err_class":"custom_error"} // エラー場所・クラス指定
});
});
// 全バリデーション
var return_check = function() {
if ($.el_valid.all()) { // 全チェック
alert('チェックOK');
} else {
alert('入力エラーがあります');
return(false);
}
}
</script>
</head>
<body>
<form method="post" onsubmit="return_cheack">
<table>
<tr><td>必須</td><td><input type="text" id="item01"><span id="e_item01"></span></td></tr>
<tr><td>必須、5から10文字</td><td><input type="text" id="item_a0"><span id="e_item_a0"></span></td></tr>
<tr><td>電話番号(フォーカス移動時のみ)</td><td><input type="text" id="item_a3"><span id="e_item_a3"></span></td></tr>
</table>
<br>
<input type="submit" value="送信" onclick="return_check()"><br><br>
<a href="http://ellsif.com/blog/?p=1">blog記事</a>
</form>
</body>
</html>
補足
失礼しました。 ダイアログではなく、 入力項目のエラーチェックのために表示しているテキストボックス横に表示されるエラーメッセージについてです。 submitが実行されているのか消えてしまいます。