質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

Q&A

解決済

3回答

4600閲覧

javascript 入力必須と日付の比較

gamusyara32

総合スコア7

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

0グッド

0クリップ

投稿2017/09/14 08:37

編集2017/09/15 07:06

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

<!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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/14 18:14

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

2017/09/15 06:56

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

回答3

0

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

例:

html

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

投稿2017/09/14 09:30

hota1024

総合スコア354

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

  • 必須項目には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

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

とりあえず。

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

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gamusyara32

2017/09/15 06:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問