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

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

ただいまの
回答率

91.00%

  • JavaScript

    13862questions

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

  • 関数

    181questions

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

  • onclick

    21questions

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

javascript 入力必須と日付の比較

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 452

gamusyara32

score 1

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>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/15 03:14

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

    キャンセル

  • kei344

    2017/09/15 15:56

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

    キャンセル

回答 3

+2

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

例:

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

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

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

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

/*エラーの洗い出し、pはパターン違反、rは必須項目、xはその他 */
var err_text={
  "kigyou":{
    "r":"企業コードは入力必須です",
  },
  "syain":{
    "r":"社員コードは入力必須です",
  },
  "nyuukai":{
    "r":"入会年月日は入力必須です",
    "p":"入会年月日のフォーマットが違います",
    "x":"入会年月日は今日よりも前の日付を入力してください",
  },
  "namekana":{
    "r":"氏名(カナ)は入力必須です",
  },
  "namekanji":{
    "r":"氏名(漢字)は入力必須です",
  },
  "sex":{
    "r":"性別は選択必須です",
  },
  "go":{
    "p":"拠出開始年月日のフォーマットが違います",
    "r":"拠出開始年月日は入力必須です",
  },
  "start":{
    "p":"月例休止開始年月日のフォーマットが違います",
    "x":"月例休止終了年月日を記載したら月例休止開始年月日も記載して下さい",
  },
  "stop":{
    "p":"月例休止終了年月日のフォーマットが違います",
    "x":"月例休止開始年月日を記載したら月例休止終了年月日も記載して下さい",
    "x2":"月例休止開始年月日は月例休止終了年月日よりも後の日付です",
  }
};
function getTodayString(){
  var str="";
  var d=new Date();
  str+=d.getFullYear().toString();
  str+=(101+d.getMonth()).toString().substr(-2);
  str+=(100+d.getDate()).toString().substr(-2);
  return str;
}
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.type=="submit" && t.value=="確認"){
    var f=t.form;
    var n=f.querySelectorAll('[required],[pattern]');
    var today=getTodayString();
    for(var i=0;i<n.length;i++){
      var flg=false;
      var err_msg="";
      var l=Array.prototype.filter.call(f.querySelectorAll('[name="start"],[name="stop"]'),function(i){return i.value!="";}).length;
      if(
        n[i].getAttribute("pattern")!=null &&
        n[i].value!=="" &&
        !n[i].value.match(new RegExp(n[i].getAttribute("pattern")))
        ){
        err_msg=err_text[n[i].name]["p"];
      }else if(
        n[i].getAttribute("required")!==null &&
        n[i].type=="text" &&
        n[i].value==""
        ){
        err_msg=err_text[n[i].name]["r"];
      }else if(
        n[i].type=="radio" &&
        f.querySelector("[name="+n[i].name+"]:checked")==null
        ){
        err_msg=err_text[n[i].name]["r"];
      }else if(
        l==1 &&
        n[i].value=="" &&
        n[i].name.match(/^(start|stop)$/)
        ){
        err_msg=err_text[n[i].name]["x"];
        flg=true;
      }else if(
        l==2 &&
        n[i].name=="stop" &&
        f.elements["start"].value>f.elements["stop"].value
        ){
        err_msg=err_text[n[i].name]["x2"];
        flg=true;
      }else if(
        n[i].name=="nyuukai" &&
        n[i].value > today
        ){
        err_msg=err_text[n[i].name]["x"];
        flg=true;
      }

      if(flg) e.preventDefault();
      n[i].parentNode.querySelector('.err').innerHTML=err_msg;
    }
  }
});
<form method="post" action="#">
<table>
<tr>
<td>企業コード*</td>
<td><input type="text" name="kigyou" required><span class="err"></span></td>
</tr>
<tr>
<td>社員コード*</td>
<td><input type="text" name="syain" required><span class="err"></span></td>
</tr>
<tr>
<td>入会年月日<br>(YYYYMMDD)*</td>
<td><input type="text" name="nyuukai" pattern="^[0-9]{8}$" required><span class="err"></span></td>
</tr>
<tr>
<td>氏名(カナ)*</td>
<td><input type="text" name="namekana" required><span class="err"></span></td>
</tr>
<tr>
<td>氏名(漢字)*</td>
<td><input type="text" name="namekanji" required><span class="err"></span></td>
</tr>
<tr>
<td>性別*</td>
<td><input type="radio" name="sex" value="man" required><input type="radio" name="sex" value="woman" required>
<span class="err"></span></td>
</tr>
<tr>
<td width="150px">提出開始年月日*<br>(YYYYMMDD)</td>
<td colspan="4" width="600px"><input type="text" name="go" pattern="^[0-9]{8}$" required><span class="err"></span></td>
</tr>
<tr>
<td>月例休止開始年月日<br>(YYYYMMDD)</td>
<td><input type="text" name="start" value="" pattern="^[0-9]{8}$"><span class="err"></span></td>
</tr>
<tr>
<td>月例休止終了年月日<br>(YYYYMMDD)</td>
<td><input type="text" name="stop" value="" pattern="^[0-9]{8}$"><span class="err"></span></td>
</tr>
<tr>
</table>
<input type="submit" value="確認">
<input type="submit" value="戻る">
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

とりあえず。

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

 追記

もう1か所。

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/15 15:50

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

    キャンセル

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

  • ただいまの回答率 91.00%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13862questions

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

  • 関数

    181questions

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

  • onclick

    21questions

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