メールフォームで入力ミスがあればエラーテキストを表示させたい

メールフォームのエラーテキスト表示について、
入力ミスがあった場合、各テキストボックスの下に記述した.errorの他に、
送信ボタンの上にも注意テキスト（#form--error）を表示させたいと考えています。

html
1            <div class="form"> 
2              <form action="confirm.html" method="POST">
3                <table>
4                  <tbody>
5                    <tr>
6                      <th>お名前<em>*</em></th>
7                      <td><div class="inner name__inner">
8                          <input type="text" name="name_last" value="" id="name--last" placeholder="姓">
9                          <div id="name--last--error" class="error"><span></span></div>
10                        </div>
11                        <div class="inner name__inner">
12                          <input type="text" name="name_first" value="" id="name--first" placeholder="名">
13                          <div id="name--first--error" class="error"><span></span></div>
14                        </div></td>
15                    </tr>
16                    <tr>
17                      <th>メールアドレス<em>*</em></th>
18                      <td><div class="inner">
19                          <input type="text" name="mail" value="" id="mail" maxlength="50">
20                          <div id="mailaddress--error" class="error"><span></span></div>
21                        </div></td>
22                    </tr>
23
24                  </tbody>
25                </table>
26                <div id="form--error"><em>入力項目をご確認ください</em></div>
27                <div class="form__btn"> 
28                  <div class="form__btn--submit">
29                    <input type="submit" name="action" value="確認画面へ" onclick="return input_check();">
30                  </div>
31                </div>
32              </form>
33            </div>

js
1<script>
2// 入力内容チェック
3$(function () {
4	$('#form--error').hide();
5});
6function input_check(){
7	var result = true;
8	
9	// 入力エラー文をリセット
10	$("#name--fisrt--error").empty();
11	$("#name--last--error").empty();
12	$("#mailaddress--error").empty();
13
14	// 入力内容セット
15	var nameLast   = $("#name--last").val();
16	var nameFirst   = $("#name--first").val();
17	var mailaddress  = $("#mail").val();
18
19	// 入力内容チェック
20
21	// お名前
22	if(nameLast == ""){
23		$("#name--last--error").html("必須項目です");
24		$("#name--last--error").addClass("inp--error");
25		result = false;
26		$('#form--error').show();
27	}else {
28		$("#name--last--error").removeClass("inp--error");
29		$('#form--error').hide();
30	}
31	if(nameFirst == ""){
32		$("#name--first--error").html("必須項目です");
33		$("#name--first--error").addClass("inp--error");
34		result = false;
35		$('#form--error').show();
36	}else {
37		$("#name--first--error").removeClass("inp--error");
38		$('#form--error').hide();
39	}
40
41	// メールアドレス
42	if(mailaddress == ""){
43		$("#mailaddress--error").html("必須項目です");
44		$("#mailaddress--error").addClass("inp--error");
45		result = false;
46		$('#form--error').show();
47	} else if(!mailaddress.match(/[ |\t|\r|\n]*\"?([^\"]+\"?@[^ <>\t]+.[^ <>\t][^ <>\t]+)[ |\t|\r|\n]*/)){
48		$('#mailaddress--error').html("無効なメールアドレスです");
49		$("#mailaddress--error").addClass("inp--error");
50		result = false;
51		$('#form--error').show();
52	} else {
53		$("#mailaddress--error").removeClass("inp--error");
54		$('#form--error').hide();
55	}
56
57	return result;
58}
59</script>

上記のJSだと、メールアドレスが入力されていた場合、
ボタンの上の#form--errorが表示されなくなってしまいます。
result = false;を拾えばいいかと思いましたが、うまくいかず…
何か方法はありますでしょうか。

お知恵をお貸しいただけますと幸いです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

show,hide系を一回全部消して以下のアウト部分を追加してください。

Js
1
2$(function () {
3    $('#form--error').hide();
4});
5function input_check(){
6    var result = true;
7    var r = 0; //ここ
8
9    // 入力エラー文をリセット
10    $("#name--fisrt--error").empty();
11    $("#name--last--error").empty();
12    $("#mailaddress--error").empty();
13
14    // 入力内容セット
15    var nameLast   = $("#name--last").val();
16    var nameFirst   = $("#name--first").val();
17    var mailaddress  = $("#mail").val();
18
19    // 入力内容チェック
20
21    // お名前
22    if(nameLast == ""){
23        $("#name--last--error").html("必須項目です");
24        $("#name--last--error").addClass("inp--error");
25        r++; //ここ
26        result = false;
27    }else {
28        $("#name--last--error").removeClass("inp--error");
29    }
30    if(nameFirst == ""){
31        $("#name--first--error").html("必須項目です");
32        $("#name--first--error").addClass("inp--error");
33        r++; //ここ
34        result = false;
35    }else {
36        $("#name--first--error").removeClass("inp--error");
37    }
38
39    // メールアドレス
40    if(mailaddress == ""){
41        $("#mailaddress--error").html("必須項目です");
42        $("#mailaddress--error").addClass("inp--error");
43        r++; //ここ
44        result = false;
45    } else if(!mailaddress.match(/[ |\t|\r|\n]*\"?([^\"]+\"?@[^ <>\t]+.[^ <>\t][^ <>\t]+)[ |\t|\r|\n]*/)){
46        $('#mailaddress--error').html("無効なメールアドレスです");
47        $("#mailaddress--error").addClass("inp--error");
48        r++; //ここ
49        result = false;
50    } else {
51        $("#mailaddress--error").removeClass("inp--error");
52    }
53    if(r>0){//ここ
54      $('form--error').show(); //ここ
55    } //ここ
56    return result;
57}
58