javascript 入力必須と日付の比較

javascriptで簡単な画面を作っています。
*は入力必須で、未記入の場合はメッセージを表示し、入会日は今日よりも前の日付、月例休止開始年月日は月例休止終了年月日より前の日付かをチェックするものを実現したいのですがわかりません。関数を三つ定義して、onclick=""3つ関数を並べて書く、アラーとメッセージが表示された後に、入力した項目がすべて消えてしまいます。なので、date(),date2()関数をmeigara()関数に埋め込んで、ひとつの関数としたいのですが、書き方がわかりません。プログラミングを始めてまだ３ヶ月なのでお手柔らかに・・・

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>会員情報登録</title> <style type="text/css"> body,table,tr,th,td { margin:0; padding:0; } table,tr,th,td { border: 2px solid; border-collapse: collapse; } .center { margin: auto;} td:first-child { background-color:#CD853F} td:nth-child(3n) { background-color:#CD853F} td:nth-child(2n) {background-color:#FFF5EE} p { text-align: center} div { text-align: center} </style> <script type="text/javascript"> ``` function meigara(){ if(document.data.kigyou.value == ""){ alert("企業コードは入力必須です"); return false; } if(document.data.syain.value == ""){ alert("社員コードは入力必須です"); return false; } if(document.data.nyuukai.value == ""){ alert("入会年月日は入力必須です"); return false; } if(document.data.namekana.value == ""){ alert("氏名(カナ)は入力必須です"); return false; } if(document.data.namekanji.value == ""){ alert("氏名(漢字)は入力必須です"); return false; } if(!document.data.sex[0].checked && !document.data.sex[1].checked){ alert("性別は選択必須です"); return false; } if(document.data.go.value == ""){ alert("拠出開始年月日は入力必須です"); return false; } if(!document.data.nyuukai.value == ""){ date(); return false; }

		if(!document.data.start.value == "" && !document.data.stop.value == ""){
			if(date2()==false){	
				alert("月例休止開始年月日は月例休止終了年月日よりも後の日付です");
				return false;
			}else(date2()==true){
				return true;
			}
		}
		else{
			window.open("会員情報登録確認.html");
		}
	}
	function reset() {
		document.getElementById("txt");
	}

	function backtogo(){
		window.open("会員情報初期画面.html");
	}
	//入会年月日は今日より前かどうか
	function date(){
		var now = new Date();
		var year = now.getFullYear();
		var month= now.getMonth();
		var day=now.getDay();
		text1=document.data.nyuukai.value;
		var year2=text1.substring(0,4);
		var month2=text1.substring(4,6);
		var day2=text1.substring(6,9);
		var ima = new Date(year,month,day)
		var atai= new Date(year2,month2,day2)
		if(ima < atai){
			alert("入会年月日は今日よりも前の日付を入力してください");
			return false;
		}
	}
	//月例休止開始年月日は月例休止終了年月日よりも後の日付か
	function date2(){
		text1=document.data.start.value;
		var year1=text1.substring(0,4);
		var month1=text1.substring(4,6);
		var day1=text1.substring(6,9);
		text2=document.data.stop.value;
		var year2=text2.substring(0,4);
		var month2=text2.substring(4,6);
		var day2=text2.substring(6,9);
		var kaishi = new Date(year1,month2,day2)
		var syuryo= new Date(year2,month2,day2)
		if(kaishi > syuryo){
			return false;
		}else{
			return true;
		}
	}

	</script>
	</head>
	<body>
		<table>
			<tr>
				<td width="150px">入力部店</td><td width="700px">200 投信自己</td>
			</tr>
		</table><br>
		<table class="center">
			<tr>
				<td width="150px">持株会コード</td>
				<td width="600px">298165 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 00000</td></tr>
			<tr>
				<td>会員コード</td><td>AA48527012</td>
			</tr>
		</table><br>
		<form name="data" method="post" action="#">
		<div>会員基本情報</div>
		<table class="center">
			<tr>
				<td width="150px">企業コード*</td>
				<td colspan="4" width="600px"><input type="text" name="kigyou" style="width:100px;">
				</td>
			</tr>
			<tr>
				<td>事務所コード</td>
				<td colspan="4"><input type="text" name="jimusyo" style="width:100px;"></td>
			</tr>
			<tr>
				<td>所属コード</td>
				<td colspan="4"><input type="text" name="shozoku" style="width:100px;"></td>
			</tr>
			<tr>
				<td>社員コード*</td>
				<td><input type="text" name="syain" style="width:100px;"></td>
				<td>入会年月日<br>(YYYYMMDD)*</td>
				<td><input type="text" name="nyuukai" style="width:100px;"></td>
			</tr>
			<tr>
				<td>氏名(カナ)*</td>
				<td><input type="text" name="namekana" style="width:200px;"></td>
				<td>氏名(漢字)*</td>
				<td><input type="text" name="namekanji" style="width:200px;"></td>
			</tr>
			<tr>
				<td>性別*</td>
				<td>男<input type="radio" name="sex" value="man">
					女<input type="radio" name="sex" value="woman"></td>
				<td>メールアドレス</td>
				<td><input type="text" name="mail" style="width:200px;"></td>
			</tr>
			<tr>
				<td>振替部店コード</td>
				<td><input type="text" name="huri" style="width:100px;"></td>
				<td>振替口座番号</td>
				<td><input type="text" name="kouza" style="width:100px;"></td>
			</tr>
			<tr>
				<td>税コード</td>
				<td  colspan="3">
				<select id="time" name="tax" onchange="chg()" width="180px";>
								</select></td>
			</tr>
			<tr>
				<td>郵便番号</td>
				<td><input type="text" name="post" style="width:50px;" maxlength="3"> - 
				<input type="text" name="post2" style="width:50px;" maxlength="4"></td>
				<td>住所コード</td>
				<td><input type="text" name="adress" style="width:100px;"></td>
			</tr>
			<tr>
				<td>住所(カナ)</td>
				<td colspan="4"><input type="jyusyokana" name="jimusyo" style="width:450px;"></td>
			</tr>
			<tr>
				<td>住所(漢字)</td>
				<td colspan="4"><input type="jyushokanji" name="jimusyo" style="width:450px;"></td>
			</tr>
			<tr>
				<td>住所ステータス</td>
				<td><input type="checkbox" name="sta1"> 住所不明</td>
				<td>会員ステータス</td>
				<td><input type="checkbox" name="sta2"> 退社済み</td>
			</tr>
		</table>
		<br>
		<div>会員拠出情報</div>
		<table class="center">
			<tr>
				<td width="150px">提出開始年月日*<br>(YYYYMMDD)</td>
				<td colspan="4" width="600px"><input type="text" name="go" style="width:100px;">
				</td>
			</tr>
			<tr>
				<td width="150px">月例拠出口数</td>
				<td colspan="4" width="500px"><input type="text" name="kazu" style="width:100px;">口
				</td>
			</tr>
			<tr>
				<td>月例休止開始年月日<br>(YYYYMMDD)</td>
				<td><input type="text" name="start" style="width:100px;"></td>
				<td>月例休止終了年月日<br>(YYYYMMDD)</td>
				<td><input type="text" name="stop" style="width:100px;"></td>
			</tr>
			<tr>
				<td>賞与拠出口数</td>
				<td colspan="3"><input type="text" name="syouyo" style="width:100px;">口</td>
			</tr>
			<tr>
				<td>賞与休止状況</td>
				<td colspan="3"><input type="checkbox" name="jyoukyou">休止中</td>
			</tr>
		</table>
<p>
			```
<input type="submit" value="確認" onclick="return meigara()">

			<input type="submit" value="戻る" onclick="backtogo();">
		</p>
	</form>
</body>

</html>

kei344

2017/09/14 18:14

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2017/09/15 06:56

「コード」にはHTMLも含まれます。

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

回答3件

入力必須なら<input>にrequired属性をつければフォーム送信時に未入力なら警告がでます。

例：

html
1名前(入力必須です)：<input type="text" required>

投稿2017/09/14 09:30

hota1024

総合スコア354

ベストアンサー

ちょっと適当に調整してみました。
他の方も指摘がありますがまずは以下調整し下さい

必須項目にはrequiredをつけてください
フォーマットが決まっている項目にはpatternをつけてください

※とりあえず不要なinputは省略しました

javascript
1/*エラーの洗い出し、pはパターン違反、rは必須項目、xはその他 */
2var err_text={
3  "kigyou":{
4    "r":"企業コードは入力必須です",
5  },
6  "syain":{
7    "r":"社員コードは入力必須です",
8  },
9  "nyuukai":{
10    "r":"入会年月日は入力必須です",
11    "p":"入会年月日のフォーマットが違います",
12    "x":"入会年月日は今日よりも前の日付を入力してください",
13  },
14  "namekana":{
15    "r":"氏名(カナ)は入力必須です",
16  },
17  "namekanji":{
18    "r":"氏名(漢字)は入力必須です",
19  },
20  "sex":{
21    "r":"性別は選択必須です",
22  },
23  "go":{
24    "p":"拠出開始年月日のフォーマットが違います",
25    "r":"拠出開始年月日は入力必須です",
26  },
27  "start":{
28    "p":"月例休止開始年月日のフォーマットが違います",
29    "x":"月例休止終了年月日を記載したら月例休止開始年月日も記載して下さい",
30  },
31  "stop":{
32    "p":"月例休止終了年月日のフォーマットが違います",
33    "x":"月例休止開始年月日を記載したら月例休止終了年月日も記載して下さい",
34    "x2":"月例休止開始年月日は月例休止終了年月日よりも後の日付です",
35  }
36};
37function getTodayString(){
38  var str="";
39  var d=new Date();
40  str+=d.getFullYear().toString();
41  str+=(101+d.getMonth()).toString().substr(-2);
42  str+=(100+d.getDate()).toString().substr(-2);
43  return str;
44}
45document.addEventListener('click',function(e){
46  var t=e.target;
47  if(t.nodeName=="INPUT" && t.type=="submit" && t.value=="確認"){
48    var f=t.form;
49    var n=f.querySelectorAll('[required],[pattern]');
50    var today=getTodayString();
51    for(var i=0;i<n.length;i++){
52      var flg=false;
53      var err_msg="";
54      var l=Array.prototype.filter.call(f.querySelectorAll('[name="start"],[name="stop"]'),function(i){return i.value!="";}).length;
55      if(
56        n[i].getAttribute("pattern")!=null &&
57        n[i].value!=="" &&
58        !n[i].value.match(new RegExp(n[i].getAttribute("pattern")))
59        ){
60        err_msg=err_text[n[i].name]["p"];
61      }else if(
62        n[i].getAttribute("required")!==null &&
63        n[i].type=="text" &&
64        n[i].value==""
65        ){
66        err_msg=err_text[n[i].name]["r"];
67      }else if(
68        n[i].type=="radio" &&
69        f.querySelector("[name="+n[i].name+"]:checked")==null
70        ){
71        err_msg=err_text[n[i].name]["r"];
72      }else if(
73        l==1 &&
74        n[i].value=="" &&
75        n[i].name.match(/^(start|stop)$/)
76        ){
77        err_msg=err_text[n[i].name]["x"];
78        flg=true;
79      }else if(
80        l==2 &&
81        n[i].name=="stop" &&
82        f.elements["start"].value>f.elements["stop"].value
83        ){
84        err_msg=err_text[n[i].name]["x2"];
85        flg=true;
86      }else if(
87        n[i].name=="nyuukai" &&
88        n[i].value > today
89        ){
90        err_msg=err_text[n[i].name]["x"];
91        flg=true;
92      }
93        
94      if(flg) e.preventDefault();
95      n[i].parentNode.querySelector('.err').innerHTML=err_msg;
96    }
97  }
98});

HTML
1<form method="post" action="#">
2<table>
3<tr>
4<td>企業コード*</td>
5<td><input type="text" name="kigyou" required><span class="err"></span></td>
6</tr>
7<tr>
8<td>社員コード*</td>
9<td><input type="text" name="syain" required><span class="err"></span></td>
10</tr>
11<tr>
12<td>入会年月日<br>(YYYYMMDD)*</td>
13<td><input type="text" name="nyuukai" pattern="^[0-9]{8}$" required><span class="err"></span></td>
14</tr>
15<tr>
16<td>氏名(カナ)*</td>
17<td><input type="text" name="namekana" required><span class="err"></span></td>
18</tr>
19<tr>
20<td>氏名(漢字)*</td>
21<td><input type="text" name="namekanji" required><span class="err"></span></td>
22</tr>
23<tr>
24<td>性別*</td>
25<td>男<input type="radio" name="sex" value="man" required>
26女<input type="radio" name="sex" value="woman" required>
27<span class="err"></span></td>
28</tr>
29<tr>
30<td width="150px">提出開始年月日*<br>(YYYYMMDD)</td>
31<td colspan="4" width="600px"><input type="text" name="go" pattern="^[0-9]{8}$" required><span class="err"></span></td>
32</tr>
33<tr>
34<td>月例休止開始年月日<br>(YYYYMMDD)</td>
35<td><input type="text" name="start" value="" pattern="^[0-9]{8}$"><span class="err"></span></td>
36</tr>
37<tr>
38<td>月例休止終了年月日<br>(YYYYMMDD)</td>
39<td><input type="text" name="stop" value="" pattern="^[0-9]{8}$"><span class="err"></span></td>
40</tr>
41<tr>
42</table>
43<input type="submit" value="確認">
44<input type="submit" value="戻る">
45</form>
46

投稿2017/09/15 07:53

yambejp

総合スコア118164

とりあえず。

javascript
1if(date2()==false){    
2  alert("月例休止開始年月日は月例休止終了年月日よりも後の日付です");
3  return false;
4}else(date2()==true){  // ここは else if (...) としないとエラーになります。
5  return true;
6}

追記

もう1か所。

javascript
1  if(!document.data.start.value == "" && !document.data.stop.value == ""){
2    if(date2()==false){    
3      alert("月例休止開始年月日は月例休止終了年月日よりも後の日付です");
4      return false;
5    }else if(date2()==true){
6      return true;
7    }
8  }
9  else{
10    window.open("会員情報登録確認.html");
11  }

条件文を読むと、「月例休止開始年月日」「月例休止終了年月日」のどちらかが空文字列の時に「会員情報登録確認.html」が開きますが、それでよろしいですか？

投稿2017/09/15 01:21

編集2017/09/15 06:10

Lhankor_Mhy

総合スコア37634

退会済みユーザー

2017/09/15 06:50

ありがとうございます。「月例休止開始年月日」「月例休止終了年月日」のどちらかを記入した場合は片方も記入するようにアラートメッセージを表示し、どちらも記入していない場合は、そのまま次に移るようにしたいです。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

企業コード*	\r\n\t\t\t\t
事務所コード
所属コード
社員コード*		入会年月日 (YYYYMMDD)*
氏名(カナ)*		氏名(漢字)*
性別*	男\r\n\t\t\t\t\t女	メールアドレス
振替部店コード		振替口座番号
税コード	\r\n\t\t\t\t
郵便番号	- \r\n\t\t\t\t	住所コード
住所(カナ)
住所(漢字)
住所ステータス	住所不明	会員ステータス	退社済み

提出開始年月日* (YYYYMMDD)	\r\n\t\t\t\t
月例拠出口数	口\r\n\t\t\t\t
月例休止開始年月日 (YYYYMMDD)		月例休止終了年月日 (YYYYMMDD)
賞与拠出口数	口
賞与休止状況	休止中

持株会コード	298165 00000
会員コード	AA48527012

追記

関連した質問