teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問フォームのバリデーションをパスしたら、ボタンを押せるようにしたい

編集履歴

質問編集履歴

2

画像追加

2020/03/10 20:50

投稿

YYmd0525
YYmd0525

スコア10

test CHANGED
File without changes
test CHANGED
@@ -388,8 +388,16 @@
388
388
 
389
389
 
390
390
 
391
- ### 補足情報（FW/ツールのバージョンなど）
391
+ ### 補足情報（20/3/11追記）
392
+
392
-
393
+ ![イメージ説明](8cc663fcdafac339b792ef98d50a93e2.png)
393
-
394
-
394
+
395
- ここにより詳細な情報を記載してください。
395
+ 上記のようなのをイメージしています。
396
+
397
+
398
+
399
+ [https://logic-a.com/2013/05/22/submit_false_on_textbox_text_none/](https://logic-a.com/2013/05/22/submit_false_on_textbox_text_none/)
400
+
401
+ ただ検索すると、入力される、という条件で投稿ボタンを出すものばかりなので、
402
+
403
+ それ以外の条件を入れることはできないのでしょうか。

1

HTML、CSSの追記

2020/03/10 20:50

投稿

YYmd0525
YYmd0525

スコア10

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,196 @@
12
12
 
13
13
 
14
14
 
15
+ ```PHP
16
+
17
+ <?php
18
+
19
+
20
+
21
+ const ERROR_NAME = '１０文字以内で入力';
22
+
23
+ const ERROR_EMPTY = '入力してください';
24
+
25
+ const ERROR_MAIL = '正しい形式で入力';
26
+
27
+ const ERROR_COMMENT = '４文字以上で入力';
28
+
29
+
30
+
31
+ if (!empty($_POST)) {
32
+
33
+ $error = array();
34
+
35
+
36
+
37
+ $username = $_POST['username'];
38
+
39
+ $usermail = $_POST['usermail'];
40
+
41
+ $userpass = $_POST['userpass'];
42
+
43
+
44
+
45
+ if(empty($username)) {
46
+
47
+ $error['error_name'] = ERROR_EMPTY;
48
+
49
+ }
50
+
51
+ if(!empty($username)) {
52
+
53
+ if(strlen($username) > 10) {
54
+
55
+ $error['error_name2'] = ERROR_NAME;
56
+
57
+ }
58
+
59
+ }
60
+
61
+
62
+
63
+ if(empty($usermail)) {
64
+
65
+ $error['error_mail'] = ERROR_EMPTY;
66
+
67
+ }
68
+
69
+ if(!empty($usermail)) {
70
+
71
+ $reg_str = '/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/';
72
+
73
+
74
+
75
+ if (!preg_match($reg_str, $usermail)) {
76
+
77
+ $error['error_mail2'] = ERROR_MAIL;
78
+
79
+ }
80
+
81
+ }
82
+
83
+
84
+
85
+ if(empty($userpass)) {
86
+
87
+ $error['error_pass'] = ERROR_EMPTY;
88
+
89
+ }
90
+
91
+ if(!empty($userpass)) {
92
+
93
+ if(strlen($userpass) < 4) {
94
+
95
+ $error['error_pass'] = ERROR_COMMENT;
96
+
97
+ }
98
+
99
+ }
100
+
101
+
102
+
103
+ if(empty($error)) {
104
+
105
+ header('Location: index.html');
106
+
107
+ exit();
108
+
109
+ }
110
+
111
+ }
112
+
113
+
114
+
115
+
116
+
117
+ ?>
118
+
119
+ <!DOCTYPE html>
120
+
121
+ <html lang="en">
122
+
123
+ <head>
124
+
125
+ <meta charset="UTF-8">
126
+
127
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
128
+
129
+ <title>Document</title>
130
+
131
+ <link rel="stylesheet" href="style.css">
132
+
133
+ </head>
134
+
135
+ <body>
136
+
137
+ <form action="" method="post">
138
+
139
+ <div class="form_g <?php if(!empty($error['error_name'] || $error['error_name2'])) echo 'has-error' ?>">
140
+
141
+ <label><span class="help-block">
142
+
143
+ <?php if(!empty($error['error_name'])) echo $error['error_name'] ?>
144
+
145
+ <?php if(!empty($error['error_name2'])) echo $error['error_name2'] ?>
146
+
147
+ </span>
148
+
149
+ <input type="text" name="username" class="username" placeholder="ユーザー名" value="<?php if(!empty($username)) echo $username ?>">
150
+
151
+ </label>
152
+
153
+ </div>
154
+
155
+ <div class="form_g <?php if(!empty($error['error_mail'] || $error['error_mail2'])) echo 'has-error' ?>">
156
+
157
+ <label><span class="help-block">
158
+
159
+ <?php if(!empty($error['error_mail'])) echo $error['error_mail'] ?>
160
+
161
+ <?php if(!empty($error['error_mail2'])) echo $error['error_mail2'] ?>
162
+
163
+ </span>
164
+
165
+ <input type="text" name="usermail" class="usermail" placeholder="メールアドレス" value="<?php if(!empty($usermail)) echo $usermail ?>">
166
+
167
+ </label>
168
+
169
+ </div>
170
+
171
+ <div class="form_g <?php if(!empty($error['error_pass'] || $error['error_pass2'])) echo 'has-error' ?>">
172
+
173
+ <label><span class="help-block">
174
+
175
+ <?php if(!empty($error['error_pass'])) echo $error['error_pass'] ?>
176
+
177
+ <?php if(!empty($error['error_pass2'])) echo $error['error_pass2'] ?>
178
+
179
+ </span>
180
+
181
+ <input type="password" name="userpass" class="serpassu" placeholder="パスワード" value="<?php if(!empty($userpass)) echo $userpass ?>">
182
+
183
+ </label>
184
+
185
+ </div>
186
+
187
+ <button type="submit" value="signup" class="send">新規登録</button>
188
+
189
+ </form>
190
+
191
+
192
+
193
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
194
+
195
+ <script src="style.js"></script>
196
+
197
+ </body>
198
+
199
+ </html>
200
+
201
+ ```
202
+
203
+
204
+
15
205
  ```JavaScript
16
206
 
17
207
  const ERROR_EMPTY = '入力してください';
@@ -134,6 +324,40 @@
134
324
 
135
325
  ```
136
326
 
327
+ ```CSS
328
+
329
+ .send[disabled] {
330
+
331
+ background-color: #aaa;
332
+
333
+ cursor: not-allowed;
334
+
335
+ }
336
+
337
+
338
+
339
+ .has-error {
340
+
341
+ color: red;
342
+
343
+ }
344
+
345
+
346
+
347
+ .has-error span {
348
+
349
+ display: block;
350
+
351
+ padding-bottom: 10px;
352
+
353
+ color: #ff0000;
354
+
355
+ }
356
+
357
+ ```
358
+
359
+
360
+
137
361
 
138
362
 
139
363
  ### 試したこと
@@ -144,7 +368,7 @@
144
368
 
145
369
  さらに、エラーの場合にhas-errorというクラスを与えて、エラーでない場合にhas-successというクラスを与えています。
146
370
 
147
- 最後にhas-successがあった場合、登録ボタンのdisabledをfalseにすればできるんではないか？と思いましたができませんでした。
371
+ 最後にhas-successがあった場合、登録ボタンのdisabledをfalseにすればできるんではないか？と思いましたが、最後の構文の構成がわからず、inputからカーソルを外すとボタンが押せるようになってしまいます。
148
372
 
149
373
 
150
374
 
@@ -152,7 +376,9 @@
152
376
 
153
377
  グローバル変数にfalseを代入、エラーじゃないelseの中でtrueを代入。
154
378
 
155
- ３つのfunctionが終わった後に、if文でfalseならボタンは非表示、trueなら表示としましたが、これもうまくいきませんでした。
379
+ ３つのfunctionが終わった後に、if文でfalseならボタンは非表示、trueなら表示としましたが、こちらはdisabeledのままで押せるようになりません。
380
+
381
+
156
382
 
157
383
 
158
384