liffでフォームに入力した際にrequiredを反映させて、入力していない事項がある場合は送信できないようにしたい

###前提・実現したいこと
liffでフォームに入力した際にrequiredを反映させて、入力していない事項がある場合は送信できないようにしたい

###質問内容
上記内容を実現するために現在のコードのどこを変更するべきですか

###発生している問題・エラーメッセージ
sendmessageを採用しているのですが、送信ボタンを押した時にrequiredが入力されている部分は入力してくださいと表示が出るのですがそれでも送信されてしまい、ラインが一連のフローの負荷に耐えきれず落ちてしまいます。
この際メッセージは送信されています。

###エラーメッセージ
現在確認できず

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="css/style.css">
8    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
10    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" crossorigin="anonymous">
11    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">
12    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
13    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
14    <script src="https://use.fontawesome.com/7bcbed1321.js"></script>
15    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
16    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js"></script>
18    <title>Test</title>
19    <style>
20         * { 
21                margin: 0px; 
22                padding: 0px; 
23            }
24
25         h1 {
26            background: #1b7f1b !important;/*背景色*/
27            padding: 0.5em;/*文字まわり（上下左右）の余白*/
28            color:white !important ;
29            text-align: center;
30            font-family: "Arial";
31            font-size:x-large;
32            margin-top: 0%;
33          }
34
35          p{
36            columns: #000000;
37            font-size: medium;
38            color:#696969;
39          }
40
41          .headerP{
42            padding-left:10% !important;/*文字まわり（上下左右）の余白*/
43            padding-right:5% !important;
44            text-align: left !important;
45          }
46         
47         .check{
48           padding-left: 35%;
49         }
50
51          h3{
52            text-align: center;
53          }
54
55          .contents{
56            text-align: center;
57          }
58
59          .button {
60            display       : inline-block;
61            border-radius: 10px;
62            font-size     : 16pt;        /* 文字サイズ */
63            text-align    : center;      /* 文字位置   */
64            cursor        : pointer;     /* カーソル   */
65            padding       : 12px 62px;   /* 余白       */
66            background    : #1b7f1b;     /* 背景色     */
67            color         : #ffffff;     /* 文字色     */
68            line-height   : 1em;         /* 1行の高さ  */
69            transition    : .3s;         /* なめらか変化 */
70          }
71    </style>
72  </head>
73  <body>
74     <div class="container">
75      <form class="form-horizontal" id="myForm" onsubmit="return false;">     
76  <div class="form-group">
77      <div class="col-xs-9 check">
78        <div class="checkbox" id="checkbox1">
79          <label><input type="checkbox" required><p><b>同意しました</b></p></label>
80    </div>
81    <div class="contents">
82        
83        <h3>お名前
84          <input name="namebox1" id="id_namebox1" type="text">
85        </h3>
86
87        <button id="sendmessagebutton" class="button">送信</button>
88      </div>
89      </div>
90    </form>
91    </div>
92  
93    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
94    <script>
95        //function onButtonClick() {
96            liff.init({
97                liffId: "ID",
98            })
99            .then(async () => {
100              document.getElementById('sendmessagebutton').addEventListener('click', function () {
101              var name=document.getElementById("id_namebox1").value;
102             
103              liff.sendMessages([{
104                    type: 'text',
105                    text: "入力内容送信\n・お名前:" + name,
106                }]).then(function() {
107                    window.alert('情報を送信しました');
108                    liff.closeWindow();
109                  })
110                })
111              });
112               //target.innerText = document.id_form1.id_textBox1.value;//これでもOK
113        //} 
114              // init vConsole
115              var vConsole = new VConsole();
116              console.log('Hello world');
117          </script>
118  </body>
119  </html>
120

###言語名
HTML,css,javascript

試したこと

補足情報

firebaseにdeployしています

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

回答2件

required属性で制限出来るのは、
formタグのaction属性でセットしたurlへのリクエストだけだと思います。

addEventListener('click', function () {...})はclickイベントをトリガーに関数を実行しなさいという命令なので、required属性に関係なくclickされたら処理は動きます。

addEventListener('click', function () {...})での処理を制限したい場合は、
JavaScriptでValidationの処理を書くしかないはずです。

JSでのValidationは以下のQiita記事が参考になりそうです。
https://qiita.com/zaburo/items/a8fdcb0e1237f6ef97ff

投稿2020/10/20 18:48

waito

総合スコア23

taiga_senren

2020/10/21 02:27

ご回答ありがとうございます！本日その方向で試してみます、また進捗はここに記載していきます。

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

自己解決

解決致しました、

javascript
1if (name === ""){
2                alert("未入力があります");
3                return false;
4              }

こちらのコードのみでvalidationの作成は可能でした

投稿2020/11/07 14:22

taiga_senren

総合スコア2

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

liffでフォームに入力した際にrequiredを反映させて、入力していない事項がある場合は送信できないようにしたい

試したこと

補足情報

関連した質問