teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

内容詳しく記入してます。わかる範囲でcodeも記入ずみです。動作できると思うのですが、素人ですいません

2020/12/20 13:10

投稿

nobinomio
nobinomio

スコア45

title CHANGED
File without changes
body CHANGED
@@ -9,7 +9,40 @@
9
9
  ⑵バスルートを選択すると→停留所のlabelとselectboxが表示される
10
10
  ⑶3つのselectboxに選択がない場合のみ、正しく入力してくださいが出るようにしたい→現在は全て出たままになってしまう
11
11
  どなたかわかる方教えていただけますか?
12
- ```HTML
12
+ ```HTML
13
+ <head>
14
+ <meta charset="UTF-8">
15
+ <title>formrun.js - Confirm mode</title>
16
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script>
18
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
19
+ <script src="https://sdk.form.run/js/v2/formrun.js"></script>
20
+ </head>
21
+
22
+ <body>
23
+
24
+ <div class="container">
25
+ <h1>formrun.js <small> - Confirm mode</small></h1>
26
+
27
+ <div class="card">
28
+ <h3 class="card-header" data-formrun-hide-if-confirm>フォームを入力してください</h3>
29
+ <h3 class="card-header" data-formrun-show-if-confirm>確認画面</h3>
30
+
31
+ <div class="card-block">
32
+ <form class="formrun" action="#" method="get" data-formrun-confirm>
33
+ <div class="form-group row"
34
+ data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="お名前">
35
+ <label class="col-xs-3 col-form-label" for="name">お名前</label>
36
+ <div class="col-xs-9" data-formrun-hide-if-confirm>
37
+ <input type="text" class="form-control" id="name" name="お名前"
38
+ data-formrun-required data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
39
+ <div class="text-danger" data-formrun-show-if-error="お名前">お名前を正しく入力してください</div>
40
+ </div>
41
+ <div class="col-xs-9" data-formrun-show-if-confirm>
42
+ <span data-formrun-confirm-value="お名前"></span>
43
+ </div>
44
+ </div>
45
+
13
46
  <div class="form-group row">
14
47
  <label class="form-control-label">バス希望 <span class="haveto">必須</span></label>
15
48
  <div class="form-control-label" data-formrun-hide-if-confirm>
@@ -63,6 +96,19 @@
63
96
  <span data-formrun-confirm-value="停留所"></span>
64
97
  </div>
65
98
  </div>
99
+ <div>
100
+ <a href="javascript:void(0)" class="btn btn-secondary" data-formrun-back-button>戻る</a>
101
+ <button type="submit" class="btn btn-primary pull-xs-right" data-formrun-error-text="未入力の項目があります" data-formrun-send-text="送信する" data-formrun-submitting-text="送信中...">確認</button>
102
+ </div>
103
+ </form>
104
+ </div>
105
+ </div>
106
+
107
+ </div><!-- /.container -->
108
+
109
+ </body>
110
+ </html>
111
+
66
112
  ```
67
113
  ```javascript
68
114
  <script>
@@ -100,4 +146,9 @@
100
146
  }
101
147
  });
102
148
  </script>
149
+ ```
150
+ ```CSS
151
+ body {
152
+ padding: 50px 0 100px;
153
+ }
103
154
  ```