html
1<form action="/babel/RegistraionPro" method="post" name="form" onsubmit="return check();">
2<p id="error">
3</p>
4ニックネーム :<input type="text" name="nickname" id="nickname">
5パスワード :<input type="password" name="password" id="password">

現在以下のようにして入力チェックとエラーメッセージの設定を行っています

javascript
1function check() {
2var rs  = true;
3var errorMsg = [];
4
5if(document.getElementById("nickname").value == "") {
6errorMsg.push("ニックネームを入力してください");
7rs = false;
8}
9if(document.getElementById("password").value =="") {
10errorMsg.push("パスワードを入力してください");
11rs = false;
12}
13if(errorMsg.length > 0) {
14document.getElementById("error").textContent = errorMsg.join('\n');
15rs = false;
16}
17return rs;
18}

最後にreturnしてもonsubmitがキャンセルされません

なお、javascript エラー内容一括表示を参考にしました

m.ts10806

2019/06/17 04:41

具体的にどのように表示させたいのでしょうか。質問本文に追記してください。また、どのような情報に対してどのようなチェックを行っているのかもご提示ください。

m.ts10806

2019/06/17 05:01

HTMLもご提示ください。

m.ts10806

2019/06/17 05:16

現在の内容だとどのような表示になっていてどうしたいのかが分かりません。質問を書いてください。

jiro-sima

2019/06/17 05:20

エラーを表示するためにonsubmitを止めたいのですが送信を止められません

m.ts10806

2019/06/17 05:23 編集

それはタイトル・質問内容からはくみ取れませんあくまで「表示の仕方」にフォーカスがあたっています。質問に具体的に記載してください。

Lhankor_Mhy

2019/06/17 05:26

{ が抜けていますが、typoでしょうか？　そちらで動かしているコードでは正しく書かれていますか？

jiro-sima

2019/06/17 05:32

一部コードを簡略化していた為のミスでした本環境では正しく対応しています

m.ts10806

2019/06/17 05:33

そうなんですか？ {つけただけでちゃんとバリデーションメッセージは表示されてSUBMITキャンセルされましたが。

Lhankor_Mhy

2019/06/18 02:21

当方の環境ではonsubmitがキャンセルされましたので、問題が再現しません。環境の問題か、ご提示いただいていない部分に問題があるのかもしれません。

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

回答3件

そもそもですが、HTMLもJavaScriptも構文的に正しくない箇所があります。

HTML <form>が閉じられていない

submitボタンがない

JavaScript　関数の開始の{がない（特にここは影響が大きいです。エラーでそもそも動作しません。）

できれば、「インデントを適切につける」ことも気を付けられたほうが良いかと思います。

ちなみに構文直すだけで解決です。

html
1<form action="/babel/RegistraionPro" method="post" name="form" onsubmit="return check();">
2  <p id="error"></p>
3  ニックネーム :
4  <input type="text" name="nickname" id="nickname">
5  パスワード :
6  <input type="password" name="password" id="password">
7  <button>送信</button>
8</form>

js
1function check() {
2	var rs = true;
3	var errorMsg = [];
4
5	if (document.getElementById("nickname").value == "") {
6		errorMsg.push("ニックネームを入力してください");
7		rs = false;
8	}
9	if (document.getElementById("password").value == "") {
10		errorMsg.push("パスワードを入力してください");
11		rs = false;
12	}
13	if (errorMsg.length > 0) {
14		document.getElementById("error").textContent = errorMsg.join('\n');
15		rs = false;
16	}
17	return rs;
18}
19

SUBMITはHTMLからの送信行為なのでJavaScriptのエラーがあろうとなかろうと送信行為を行います。
JavaScriptでreturn falseが適切に実行されて初めて「SUBMITがキャンセル」になります。
JavaScriptにエラーがあれば処理をしませんから、当然return falseは実行されないのでそのままSUBMITされます。

想定通りの動作をしていない場合、まずブラウザのデベロッパーツールのコンソールでエラーが出ていないか確認してください。

投稿2019/06/17 05:31

編集2019/06/17 05:33

m.ts10806

総合スコア80850

自己解決

まず最後の更新から間が開いたことをお詫びします
指摘を受ける中で自分が根本的な部分で詰められていないと感じたので一からjavascriptを学習しなおしました
その後コーディングし直すと無事解決しましたので長くなりますが以下に添付します

html
1<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
2</head>
3<body>
4<h1>会員登録フォーム</h1>
5<p id="error"></p>
6<form action="#" method="post" id="form">
7<p>プロフィールを入力してください</p>
8ニックネーム :<input type="text" name="nickname" id="nickname">
9性別 :<input type="radio" name="sex" value="male" id="sex_male">
10<label for="sex_male">男性</label>
11 "
12                    ／
13                "
14<input type="radio" name="sex" value="female" id="sex_famale">
15<label for="sex_male">女性</label>
16生年月日 :
17<select name="year" id="year">
18<div>
19	<option value="2019">2019</option>
20	<option value="2018">2018</option>
21	<option value="2017">2017</option>
22	<option value="2016">2016</option>
23	<option value="2015">2015</option>
24	<option value="2014">2014</option>
25	<option value="2013">2013</option>
26	<option value="2012">2012</option>
27	<option value="2011">2011</option>
28	<option value="2010">2010</option>
29	<option value="2009">2009</option>
30	<option value="2008">2008</option>
31	<option value="2007">2007</option>
32	<option value="2006">2006</option>
33	<option value="2005">2005</option>
34	<option value="2004">2004</option>
35	<option value="2003">2003</option>
36	<option value="2002">2002</option>
37	<option value="2001">2001</option>
38	<option value="2000">2000</option>
39	<option value="1999">1999</option>
40	<option value="1998">1998</option>
41	<option value="1997">1997</option>
42	<option value="1996">1996</option>
43	<option value="1995">1995</option>
44	<option value="1994">1994</option>
45	<option value="1993">1993</option>
46	<option value="1992">1992</option>
47	<option value="1991">1991</option>
48	<option value="1990">1990</option>
49	<option value="----" selected>----</option>
50	<option value="1989">1989</option>
51	<option value="1988">1988</option>
52	<option value="1987">1987</option>
53	<option value="1986">1986</option>
54	<option value="1985">1985</option>
55	<option value="1984">1984</option>
56	<option value="1983">1983</option>
57	<option value="1982">1982</option>
58	<option value="1981">1981</option>
59	<option value="1980">1980</option>
60	<option value="1979">1979</option>
61	<option value="1978">1978</option>
62	<option value="1977">1977</option>
63	<option value="1976">1976</option>
64	<option value="1975">1975</option>
65	<option value="1974">1974</option>
66	<option value="1973">1973</option>
67	<option value="1972">1972</option>
68	<option value="1971">1971</option>
69	<option value="1970">1970</option>
70	<option value="1969">1969</option>
71	<option value="1968">1968</option>
72	<option value="1967">1967</option>
73	<option value="1966">1966</option>
74	<option value="1965">1965</option>
75	<option value="1964">1964</option>
76	<option value="1963">1963</option>
77	<option value="1962">1962</option>
78	<option value="1961">1961</option>
79	<option value="1960">1960</option>
80	<option value="1959">1959</option>
81	<option value="1958">1958</option>
82	<option value="1957">1957</option>
83	<option value="1956">1956</option>
84	<option value="1955">1955</option>
85	<option value="1954">1954</option>
86	<option value="1953">1953</option>
87	<option value="1529">1952</option>
88	<option value="1951">1951</option>
89	<option value="1950">1950</option>
90	<option value="1949">1949</option>
91	<option value="1948">1948</option>
92	<option value="1947">1947</option>
93	<option value="1946">1946</option>
94	<option value="1945">1945</option>
95	<option value="1944">1944</option>
96	<option value="1943">1943</option>
97	<option value="1942">1942</option>
98	<option value="1941">1941</option>
99	<option value="1940">1940</option>
100	<option value="1399">1939</option>
101	<option value="1938">1938</option>
102	<option value="1937">1937</option>
103	<option value="1936">1936</option>
104	<option value="1935">1935</option>
105	<option value="1934">1934</option>
106	<option value="1933">1933</option>
107	<option value="1932">1932</option>
108	<option value="1931">1931</option>
109	<option value="1930">1930</option>
110	<option value="1929">1929</option>
111	<option value="1928">1928</option>
112	<option value="1927">1927</option>
113	<option value="1926">1926</option>
114	<option value="1925">1925</option>
115	<option value="1924">1924</option>
116	<option value="1923">1923</option>
117	<option value="1922">1922</option>
118	<option value="1921">1921</option>
119	<option value="1920">1920</option>
120	<option value="1919">1919</option>
121	<option value="1918">1918</option>
122	<option value="1917">1917</option>
123	<option value="1916">1916</option>
124	<option value="1915">1915</option>
125	<option value="1914">1914</option>
126	<option value="1913">1913</option>
127	<option value="1912">1912</option>
128	<option value="1911">1911</option>
129	<option value="1910">1910</option>
130	<option value="1909">1909</option>
131	<option value="1908">1908</option>
132	<option value="1907">1907</option>
133	<option value="1906">1906</option>
134	<option value="1905">1905</option>
135	<option value="1904">1904</option>
136	<option value="1903">1903</option>
137	<option value="1902">1902</option>
138	<option value="1901">1901</option>
139	<option value="1900">1900</option>
140</div>
141</select>
142<select name="month" id="month">
143<div>
144	<option value="--">--</option>
145	<option value="1">1</option>
146	<option value="2">2</option>
147	<option value="3">3</option>
148	<option value="4">4</option>
149	<option value="5">5</option>
150	<option value="6">6</option>
151000	<option value="7">7</option>
152	<option value="8">8</option>
153	<option value="9">9</option>
154	<option value="10">10</option>
155	<option value="11">11</option>
156	<option value="12">12</option>
157</div>
158</select>
159<select name="day" id="day">
160<div>
161	<option value="--">--</option>
162	<option value="1">1</option>
163	<option value="2">2</option>
164	<option value="3">3</option>
165	<option value="4">4</option>
166	<option value="5">5</option>
167	<option value="6">6</option>
168	<option value="7">7</option>
169	<option value="8">8</option>
170	<option value="9">9</option>
171	<option value="10">10</option>
172	<option value="11">11</option>
173	<option value="12">12</option>
174	<option value="13">13</option>
175	<option value="14">14</option>
176	<option value="15">15</option>
177	<option value="16">16</option>
178	<option value="17">17</option>
179	<option value="18">18</option>
180	<option value="19">19</option>
181	<option value="20">20</option>
182	<option value="21">21</option>
183	<option value="22">22</option>
184	<option value="23">23</option>
185	<option value="24">24</option>
186	<option value="25">25</option>
187	<option value="26">26</option>
188	<option value="27">27</option>
189	<option value="28">28</option>
190	<option value="29">29</option>
191	<option value="30">30</option>
192	<option value="31">31</option>
193</div>
194</select>
195<p>
196	パスワード :<input type="password" name="password" id="password">
197</p>
198<p>
199	再入力 :<input type="password" name="password_confirm" id="password_confirm">
200</p>
201<input type="submit" id="button" value="send">
202</form>

javascript
1<script type="text/javascript">
2{
3		$('#form').on('submit', function(){
4			event.preventDefault();
5		var errorMsg = [];
6		var y = $('#year').val();
7		var m = $('#month').val();
8		var d = $('#day').val();
9		var dt = new Date(y, m - 1, d);
10		console.log(dt.getFullYear);
11
12		//ニックネーム入力チェック
13		if($('#nickname').val() == "") {
14			errorMsg.push('ニックネームを入力してください');
15
16		}
17		//性別選択チェック
18		if(!($('#sex_male').prop('checked')) && !($('#sex_famale').prop('checked'))) {
19			errorMsg.push('性別を入力してください');
20
21		}
22		//生年月日選択をチェック
23		if($('#year').val() == "----" || $('#month').val() == "--" || $('#day').val() == "--") {
24			errorMsg.push('生年月日を選択してください');
25
26		}
27		//2016年2月31日等のうるう年も考慮済み
28		else if(!(dt.getFullYear() == y && dt.getMonth() == m -1 && dt.getDate() == d)) {
29			errorMsg.push('日付が正しくありません');
30
31		}
32		//パスワード入力チェック
33		if($('#password').val() == "" || $('#password_confirm').val() == "") {
34			errorMsg.push('パスワードを入力してください');
35
36		}
37		//パスワード再入力照合
38		if($('#password').val() !== $('#password_confirm').val()) {
39			errorMsg.push('パスワードが再入力されたものと一致しません');
40
41		}
42		if(errorMsg.length > 0) {
43			//既にエラー文が表示されていた場合は削除
44			$('#error').html('');
45
46			$('#error').append('<ul>');
47		    errorMsg.forEach(function(x){
48		        $('#error').append('<li>'+ x +'</li>');
49		      });
50		    $('#error').append('<ul>');
51		} else {
52			$('#form').off('submit');
53		}
54	});
55}
56</script>
57</body>
58</html>

回答頂いた方々にはお手間をおかけしました
ありがとうございます
なお上記のコードは動作も確認していますが例外、改善案等あれば是非お知らせください

投稿2019/06/19 05:55

jiro-sima

総合スコア20

errorMsg 配列にエラーメッセージを複数収めているなら
エラー表示欄にerrorMsgの内容をul-liで表示するのが妥当では？

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#f1').addEventListener('submit',function(e){
4    if(!check()) e.preventDefault();
5  });
6});
7function check(){
8  var rs  = true;
9  var errorMsg = [];
10  if(document.querySelector('#nickname').value == '') {
11    errorMsg.push('ニックネームを入力してください');
12    rs = false;
13  }
14  if(document.querySelector('#password').value =='') {
15    errorMsg.push('パスワードを入力してください');
16    rs = false;
17  }
18  if(errorMsg.length > 0) {
19    document.querySelector('#error').innerHTML = "<ul>";
20    errorMsg.forEach(function(x){
21      document.querySelector('#error').innerHTML+= "<li>"+x+"</li>";
22    })
23    document.querySelector('#error').innerHTML+= "<ul>";
24  }
25  return rs;
26}
27</script>
28<form method="post" id="f1" >
29<p id="error"></p>
30ニックネーム :<input type="text" name="nickname" id="nickname"><br>
31パスワード :<input type="password" name="password" id="password"><br>
32<input type="submit" value="send">
33</form>