実現したいこと

作成した入力ホームに記入がなかった場合にフィールドに未入力ですの文字を出したい

前提

作成した入力ホームに記入がなかった場合にフィールドに未入力ですの文字を出したいと思っています。通常の場合HTMLにinput text内にrequired="required"を記載すれば自動で出るのですが、

今回はコードの中でgoogleスクリプトの呼び出しでフォームの登録を行ってるためsubmitイベントが起こりませんでした。
よって自分でスクリプト内で必須項目が空かどうかのチェックをする必要がありコードを組みましたがうまく発動されませんでした。

番号を入力したら、名前が自動に出るようにscriptを組んでいる為、名前にはrequiredを付けず、番号と班にのみrequiredを付けたいとかんがえています

index.html
1<html>
2<body>
3<div>
4<form>
5<div class="form">
6<label for="member-id">
7<span class="label">必須</span> 番号</label>
8<div class="form-text">
9<input type="text" name="number"required="required" placeholder="半角数字" class="txt"id="member-id" onchange="outputMemberName(this.value)">
10</div>
11</div>
12				
13<div class="form">
14<label for="member-name">
15<span class="label">必須</span> 名前</label>
16<div class="form-text">
17<input type="text" placeholder="名前"class="txt" readonly="true" id="member-name">
18</div>
19</div>
20
21<div class="form">
22<label for="han">
23<span class="label">必須</span>班</label>
24<div class="form-text">
25<select name="han"class="txt" id="han"required="required">
26<option value="-" hidden>-</option>
27<option value="1">1</option>
28<option value="2">2</option>
29</select>
30</div>
31</div>
32//下記追加しています。
33<div class="wrap">
34<input type="submit"class="submit" onClick="addBtnClick()" value="登録する">
35</div>

js
1//member-id に対応する member-name を引っ張ってくるコードを追記
2// メンバーIDからメンバー名を取得してインプットボックスmember-nameへ出力する関数
3      function outputMemberName(memberId) {
4        google.script.run.withSuccessHandler(function(memberName){
5          if (memberName) {
6            document.getElementById('member-name').value = memberName;
7          } else {
8            document.getElementById('member-name').value = '';
9          }
10        }).getMemberName(memberId);
11      }
12      // 追記いただいたcode
13      document.addEventListener('DOMContentLoaded', () => {
14          const form = document.getElementById('myform');
15          form.addEventListener('submit', (event) => {
16            event.preventDefault();
17            addBtnClick();
18          });
19        });
20      // -----------------------------------------------------
21      function addBtnClick() {
22        // 実行してよいか確認する
23        const checkAddFlg = window.confirm('登録を実行してもよろしいですか？');
24
25        if(checkAddFlg) { //OKをクリックしたら…
26          // フォームの入力値を取得する 
27          const memberId = document.getElementById('member-id').value;
28          const memberName = document.getElementById('member-name').value;
29          const han = document.getElementById('han').value;
30          google.script.run.withSuccessHandler(dataAddSuccess).withFailureHandler(dataAddFail).addData(memberId, memberName, han);
31        } else {
32          alert("登録をキャンセルしました");  
33        }
34      }
35      
36      // -----------------------------------------------------
37      function dataAddSuccess() {
38        // アラートを表示し、入力フォームの値をリセットする
39        alert("登録に成功しました");
40        document.getElementById('member-id').value = '';
41        document.getElementById('member-name').value = '';
42        document.getElementById('han').value = '-';
43      }
44      // -----------------------------------------------------
45      function dataAddFail() {
46        // アラートを表示する
47        alert("登録に失敗しました");  
48      }
49      // -----------------------------------------------------
50      // 質問に記載されていないのでダミー処理を実装
51        function outputMemberName(value) {
52          console.log(value)
53        }
54
55	  </script>
56
57

js
1// -----------------------------------------------------
2// メンバーIDからメンバーの名前を取得する関数 
3// -----------------------------------------------------
4// 引数:照合させるメンバーID
5function getMemberName(val) {
6  
7  const sheet = getSheet('*********************************', 'シート1');
8  // シートの最終行を取得
9  const lastRow = sheet.getLastRow();
10
11  // シートの2行目から最終行まで繰り返し処理
12  for (let i = 2; i <= lastRow; i++) {
13    // 1列目のi行目の値を取得し変数memberIdへ格納
14    const memberId = sheet.getRange(i, 1).getValue();
15    // memberIdがvalと等しければ、2列目i行目の値（memberName）を返す
16    if (String(memberId) === val) { 
17      const memberName = sheet.getRange(i, 2).getValue();
18      return memberName;
19    }
20  }
21}

試したこと

上記、requiredコードを記入してみたのですが、textに記入なしで、登録ボタンを押したのですが、未記入の内容で普通に登録できてしまいました。

普段、required をコードで記入することがなくよくわかりません。
わかる方教えていただけますか？

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

回答1件

ベストアンサー

type="submit"のボタンであれば、普通に必須入力にできます。

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <base target="_top">
6</head>
7
8<body>
9  <div>
10    <form>
11      <input type="text" required="required" id="member-id">
12      <button class="button" type="submit">送信</button>
13    </form>
14  </div>
15</body>
16
17</html>

出力例：

質問のコードについて、書き忘れか、それとも意図的に省略したのかは不明ですが、ボタンに関する部分が欠落しています。おそらく type="button"で書いていたのではないですか？

あと、2番目の「member-name」の方ですが、required と readonly は両立できません。
（コードが省略されていますが、おそらく member-id に対応する member-name を引っ張ってくるようにしているのでしょう。この部分はrequired を外して、空白だったら警告メッセージを出力するようにプログラムを組めばよいでしょう）

追加コメントに対して

「type="button"をtype="submit"に変更してみたのですが、やはり登録ができてしまいます。」

onClickは使わず、addEventListener で submitイベントを登録して、submitされたときにaddBtnClickを実行するようにしてください。

<!DOCTYPE html>
<html>

<body>
  <div>
    <form id="myform">
      <div class="form">
        <label for="member-id">
          <span class="label">必須</span> 番号
        </label>
        <div class="form-text">
          <input type="text" name="number" required="required" placeholder="半角数字" class="txt" id="member-id"
            onchange="outputMemberName(this.value)">
        </div>
      </div>

      <div class="form">
        <label for="member-name">
          <span class="label">必須</span> 名前</label>
        <div class="form-text">
          <input type="text" placeholder="名前" class="txt" readonly="true" id="member-name">
        </div>
      </div>

      <div class="form">
        <label for="han">
          <span class="label">必須</span>班</label>
        <div class="form-text">
          <select name="han" class="txt" id="han" required>
            <option value= "" disabled selected>-</option>
            <option value="1">1</option>
            <option value="2">2</option>
          </select>
        </div>
      </div>
      <div class="wrap">
        <input type="submit" class="submit" value="登録する">
      <div class="/wrap">
    </form>
      <script>
        document.addEventListener('DOMContentLoaded', () => {
          const form = document.getElementById('myform');
          form.addEventListener('submit', (event) => {
            event.preventDefault();
            addBtnClick();
          });
        });

        function addBtnClick() {
          // 実行してよいか確認する
          const checkAddFlg = window.confirm('登録を実行してもよろしいですか？');

          if (checkAddFlg) { //OKをクリックしたら…
            // フォームの入力値を取得する 
            const memberId = document.getElementById('member-id').value;
            const memberName = document.getElementById('member-name').value;
            const han = document.getElementById('han').value; 
            google.script.run.withSuccessHandler(dataAddSuccess).withFailureHandler(dataAddFail).addData(memberId, memberName, han);
          } else {
            alert("登録をキャンセルしました");
          }
        }

        function dataAddSuccess() {
          // アラートを表示し、入力フォームの値をリセットする
          alert("登録に成功しました");
          document.getElementById('member-id').value = '';
          document.getElementById('member-name').value = '';
          document.getElementById('han').value = '-';
        }

        function dataAddFail() {
          alert("登録に失敗しました");
        }

      // メンバーIDからメンバー名を取得してインプットボックスmember-nameへ出力する関数
      function outputMemberName(memberId) {
        google.script.run.withSuccessHandler(function(memberName){
          if (memberName) {
            document.getElementById('member-name').value = memberName;
          } else {
            document.getElementById('member-name').value = '';
          }
        }).getMemberName(memberId);
      }

      </script>
</body>

</html>

投稿2023/11/21 12:20

編集2023/11/22 14:10

退会済みユーザー

総合スコア0

nobinomio

2023/11/22 05:15

ありがとうございます。お恥ずかしい話でsubmitボタンを書き忘れ、追記したのですが、submitボタンの type="button"をtype="submit"に変更してみたのですが、やはり登録ができてしまいます。 2番目の「member-name」はrequiredなしでOKなのですが。。。

退会済みユーザー

2023/11/22 12:10

追加しました

nobinomio

2023/11/22 12:53

ありがとうございます。今確認したところ、番号を未入力だと、このフィールドに入力してくださいと出るのですが、member-id に対応する member-name を引っ張ってくるようになっていたのですが、それが出なくなってしまいました。　SaYGOさんがおっしゃってたrequired と readonly は両立ができないとはこの事でしょうか？自分の認識ではmember-nameにはrequiredが使えないという認識でしたが..... member-id に対応する member-name を引っ張ってくるコードを追記しています。ご確認をお願いします

退会済みユーザー

2023/11/22 14:11

修正しました。同じ名前の関数が重複していると正常に動きませんので、ダミーの方は消してください。

nobinomio

2023/11/25 02:06 編集

すいません.submitボタンのonClickを外し忘れておりました。できました。ありがとうございました！

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