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

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

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

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

LINE Messaging API

LINE Messaging APIは、メッセージの送信・返信ができるAPIです。Web APIを経由しアプリケーションサーバとLINEのAPIでやり取りが可能。複数のメッセージタイプや分かりやすいAPIリファレンスを持ち、グループチャットにも対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

936閲覧

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

taiga_senren

総合スコア2

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

LINE Messaging API

LINE Messaging APIは、メッセージの送信・返信ができるAPIです。Web APIを経由しアプリケーションサーバとLINEのAPIでやり取りが可能。複数のメッセージタイプや分かりやすいAPIリファレンスを持ち、グループチャットにも対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/10/20 17:49

###前提・実現したいこと
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しています

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

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

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

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

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

guest

回答2

0

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

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

0

自己解決

解決致しました、

javascript

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

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

投稿2020/11/07 14:22

taiga_senren

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問