teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScriptでif文を使って、バリデーションをかけたい

編集履歴

質問編集履歴

6

修正

2021/05/28 00:33

投稿

KkkRrr99
KkkRrr99

スコア6

test CHANGED
File without changes
test CHANGED
@@ -58,6 +58,102 @@
58
58
 
59
59
  $("#forRegister").on("click", function() {
60
60
 
61
+ $.ajax({
62
+
63
+ url: "/employee/select",
64
+
65
+ type: "GET",
66
+
67
+ contentType: "application/json",
68
+
69
+ })
70
+
71
+ .done(function(user, textStatus, jqXHR) {
72
+
73
+ $("#p1").empty();
74
+
75
+ $("#p1").append(
76
+
77
+ '<section><br><br><h2>社員登録</h2><br>' +
78
+
79
+ '<div><form id="form-name">' +
80
+
81
+ '<div class="form-group"><label> 社員番号 </label><input required type="text" class="form-control" placeholder="例 : 000001" id="employee_code" name="employee_code"></div>' +
82
+
83
+ '<div class="form-group"><label> 氏名 </label><input required type="text" class="form-control" placeholder="例 : 山田　太郎" id="employee_name" name="employee_name"></div>' +
84
+
85
+ '<div class="form-group"><label> ふりがな </label><input required type="text" class="form-control" placeholder="例 : やまだ　たろう" id="furigana" name="furigana"></div>' +
86
+
87
+ '<div class="form-group"><label> メールアドレス </label><input required type="text" class="form-control" placeholder="例 : example@upload-gp.co.jp" id="mail_address" name="mail_address"></div>' +
88
+
89
+ '<div class="form-group"><label> 電話番号 </label><input required type="text" class="form-control" placeholder="例 : 000-000-000" id="tel_no" name="tel_no"></div>' +
90
+
91
+ '<div class="form-group"><label> 所属グループ </label><select class="form-control" id="affiliation_group" name="affiliation_group"><option value="">選択してください</option></select></div>' +
92
+
93
+ '<div class="form-group"><label> 役職 </label><select class="form-control" id="position" name="position"><option value="">選択してください</option></select></div>' +
94
+
95
+ '<div style="text-align: center; margin-top: 30px;">' +
96
+
97
+ '<button class="c" type="" id="register">登録する</button>' +
98
+
99
+ '</div></form></div></section>'
100
+
101
+ );
102
+
103
+ for (var j = 0; j < user[0].length; j++) {
104
+
105
+ $("#affiliation_group").append($('<option>').html(user[0][j].name).val(user[0][j].value));
106
+
107
+ }
108
+
109
+ for (var j = 0; j < user[1].length; j++) {
110
+
111
+ $("#position").append($('<option>').html(user[1][j].name).val(user[1][j].value));
112
+
113
+ }
114
+
115
+
116
+
117
+ // if ($("#employee_code").val() === null || $("#employee_code").val() === "") {
118
+
119
+ // alert("社員番号を入力してください。");
120
+
121
+
122
+
123
+ // }
124
+
125
+ // if ($("#employee_code").val().length === 6) {
126
+
127
+ // alert("6文字で入力してください。");
128
+
129
+
130
+
131
+ // }
132
+
133
+
134
+
135
+
136
+
137
+ })
138
+
139
+ .fail(function(jqXHR, textStatus, errorThrown) {
140
+
141
+ $("#p1").text(jqXHR.status); //例：404
142
+
143
+ })
144
+
145
+ .always(function() {});
146
+
147
+ });
148
+
149
+
150
+
151
+
152
+
153
+ //登録する
154
+
155
+ $(document).on("click", "#register", function() {
156
+
61
157
  if ($("#employee_code").val() === null || $("#employee_code").val() === "") {
62
158
 
63
159
  alert("社員番号を入力してください。");
@@ -66,69 +162,49 @@
66
162
 
67
163
  }
68
164
 
165
+ var json1 = {
166
+
167
+ employee_code: $("#employee_code").val(),
168
+
169
+ employee_name: $("#employee_name").val(),
170
+
171
+ furigana: $("#furigana").val(),
172
+
173
+ mail_address: $("#mail_address").val(),
174
+
175
+ tel_no: $("#tel_no").val(),
176
+
177
+ affiliation_group_code: $("#affiliation_group").val(),
178
+
179
+ position_code: $("#position").val(),
180
+
181
+ };
182
+
69
183
  $.ajax({
70
184
 
71
- url: "/employee/select",
185
+ url: "/employee/register",
72
-
186
+
73
- type: "GET",
187
+ type: "POST",
74
188
 
75
189
  contentType: "application/json",
76
190
 
77
- })
78
-
79
- .done(function(user, textStatus, jqXHR) {
80
-
81
- $("#p1").empty();
82
-
83
- $("#p1").append(
84
-
85
- '<section><br><br><h2>社員登録</h2><br>' +
86
-
87
- '<div><form id="form-name">' +
88
-
89
- '<div class="form-group"><label> 社員番号 </label><input required type="text" class="form-control" placeholder="例 : 000001" id="employee_code" name="employee_code"></div>' +
90
-
91
- '<div class="form-group"><label> 氏名 </label><input required type="text" class="form-control" placeholder="例 : 山田　太郎" id="employee_name" name="employee_name"></div>' +
92
-
93
- '<div class="form-group"><label> ふりがな </label><input required type="text" class="form-control" placeholder="例 : やまだ　たろう" id="furigana" name="furigana"></div>' +
94
-
95
- '<div class="form-group"><label> メールアドレス </label><input required type="text" class="form-control" placeholder="例 : example@upload-gp.co.jp" id="mail_address" name="mail_address"></div>' +
96
-
97
- '<div class="form-group"><label> 電話番号 </label><input required type="text" class="form-control" placeholder="例 : 000-000-000" id="tel_no" name="tel_no"></div>' +
98
-
99
- '<div class="form-group"><label> 所属グループ </label><select class="form-control" id="affiliation_group" name="affiliation_group"><option value="">選択してください</option></select></div>' +
100
-
101
- '<div class="form-group"><label> 役職 </label><select class="form-control" id="position" name="position"><option value="">選択してください</option></select></div>' +
102
-
103
- '<div style="text-align: center; margin-top: 30px;">' +
104
-
105
- '<button class="c" type="" id="register">登録する</button>' +
106
-
107
- '</div></form></div></section>'
108
-
109
- );
110
-
111
- for (var j = 0; j < user[0].length; j++) {
112
-
113
- $("#affiliation_group").append($('<option>').html(user[0][j].name).val(user[0][j].value));
114
-
115
- }
116
-
117
- for (var j = 0; j < user[1].length; j++) {
118
-
119
- $("#position").append($('<option>').html(user[1][j].name).val(user[1][j].value));
120
-
121
- }
122
-
123
-
124
-
125
-
191
+ data: JSON.stringify(json1),
192
+
193
+ dataType: "json",
194
+
195
+ })
196
+
197
+ .done(function(userList, textStatus, jqXHR) {
198
+
199
+ $("#p1").empty()
200
+
201
+ $("#p1").append('<h4>登録が完了しました</h4>')
126
202
 
127
203
  })
128
204
 
129
205
  .fail(function(jqXHR, textStatus, errorThrown) {
130
206
 
131
- $("#p1").text(jqXHR.status); //例：404
207
+ $("#p1").text(jqXHR.status);
132
208
 
133
209
  })
134
210
 
@@ -140,60 +216,6 @@
140
216
 
141
217
 
142
218
 
143
- //登録する
144
-
145
- $(document).on("click", "#register", function() {
146
-
147
- var json1 = {
148
-
149
- employee_code: $("#employee_code").val(),
150
-
151
- employee_name: $("#employee_name").val(),
152
-
153
- furigana: $("#furigana").val(),
154
-
155
- mail_address: $("#mail_address").val(),
156
-
157
- tel_no: $("#tel_no").val(),
158
-
159
- affiliation_group_code: $("#affiliation_group").val(),
160
-
161
- position_code: $("#position").val(),
162
-
163
- };
164
-
165
- $.ajax({
166
-
167
- url: "/employee/register",
168
-
169
- type: "POST",
170
-
171
- contentType: "application/json",
172
-
173
- data: JSON.stringify(json1),
174
-
175
- dataType: "json",
176
-
177
- })
178
-
179
- .done(function(userList, textStatus, jqXHR) {
180
-
181
- $("#p1").empty()
182
-
183
- $("#p1").append('<h4>登録が完了しました</h4>')
184
-
185
- })
186
-
187
- .fail(function(jqXHR, textStatus, errorThrown) {
188
-
189
- $("#p1").text(jqXHR.status);
190
-
191
- })
192
-
193
- .always(function() {});
194
-
195
- });
196
-
197
219
  ```
198
220
 
199
221
  ```java

5

修正

2021/05/28 00:33

投稿

KkkRrr99
KkkRrr99

スコア6

test CHANGED
File without changes
test CHANGED
@@ -58,9 +58,17 @@
58
58
 
59
59
  $("#forRegister").on("click", function() {
60
60
 
61
+ if ($("#employee_code").val() === null || $("#employee_code").val() === "") {
62
+
63
+ alert("社員番号を入力してください。");
64
+
65
+ return;
66
+
67
+ }
68
+
61
69
  $.ajax({
62
70
 
63
- url: "/employee/forSearch",
71
+ url: "/employee/select",
64
72
 
65
73
  type: "GET",
66
74
 
@@ -78,15 +86,15 @@
78
86
 
79
87
  '<div><form id="form-name">' +
80
88
 
81
- '<div class="form-group"><label> 社員番号 </label><input type="text" class="form-control" placeholder="例 : 000001" id="employee_code" name="employee_code"></div>' +
82
-
83
- '<div class="form-group"><label> 氏名 </label><input type="text" class="form-control" placeholder="例 : 山田　太郎" id="employee_name" name="employee_name"></div>' +
84
-
85
- '<div class="form-group"><label> ふりがな </label><input type="text" class="form-control" placeholder="例 : やまだ　たろう" id="furigana" name="furigana"></div>' +
86
-
87
- '<div class="form-group"><label> メールアドレス </label><input type=text class="form-control" placeholder="例 : example@upload-gp.co.jp" id="mail_address" name="mail_address"></div>' +
88
-
89
- '<div class="form-group"><label> 電話番号 </label><input type=text class="form-control" placeholder="例 : 000-000-000" id="tel_no" name="tel_no"></div>' +
89
+ '<div class="form-group"><label> 社員番号 </label><input required type="text" class="form-control" placeholder="例 : 000001" id="employee_code" name="employee_code"></div>' +
90
+
91
+ '<div class="form-group"><label> 氏名 </label><input required type="text" class="form-control" placeholder="例 : 山田　太郎" id="employee_name" name="employee_name"></div>' +
92
+
93
+ '<div class="form-group"><label> ふりがな </label><input required type="text" class="form-control" placeholder="例 : やまだ　たろう" id="furigana" name="furigana"></div>' +
94
+
95
+ '<div class="form-group"><label> メールアドレス </label><input required type="text" class="form-control" placeholder="例 : example@upload-gp.co.jp" id="mail_address" name="mail_address"></div>' +
96
+
97
+ '<div class="form-group"><label> 電話番号 </label><input required type="text" class="form-control" placeholder="例 : 000-000-000" id="tel_no" name="tel_no"></div>' +
90
98
 
91
99
  '<div class="form-group"><label> 所属グループ </label><select class="form-control" id="affiliation_group" name="affiliation_group"><option value="">選択してください</option></select></div>' +
92
100
 
@@ -94,7 +102,7 @@
94
102
 
95
103
  '<div style="text-align: center; margin-top: 30px;">' +
96
104
 
97
- '<button class="c" type="button" id="register">登録する</button>' +
105
+ '<button class="c" type="" id="register">登録する</button>' +
98
106
 
99
107
  '</div></form></div></section>'
100
108
 
@@ -114,24 +122,6 @@
114
122
 
115
123
 
116
124
 
117
- if ($("#employee_code").val() === null || $("#employee_code").val() === "") {
118
-
119
- alert("社員番号を入力してください。");
120
-
121
-
122
-
123
- }
124
-
125
- if ($("#employee_code").val().length === 6) {
126
-
127
- alert("6文字で入力してください。");
128
-
129
-
130
-
131
- }
132
-
133
-
134
-
135
125
 
136
126
 
137
127
  })
@@ -204,8 +194,6 @@
204
194
 
205
195
  });
206
196
 
207
-
208
-
209
197
  ```
210
198
 
211
199
  ```java

4

修正

2021/05/28 00:27

投稿

KkkRrr99
KkkRrr99

スコア6

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  ```
38
38
 
39
- (e6dfe9599a700a292904991be1bd857c.png)
39
+ ![イメージ説明](7c5eb4863bb9572630b327c03b017274.png)
40
40
 
41
41
  ```
42
42
 

3

修正

2021/05/27 14:16

投稿

KkkRrr99
KkkRrr99

スコア6

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  ```
38
38
 
39
- ![イメージ説明](0c91e0fb8959872a12bab35ce5e60760.png)
39
+ (e6dfe9599a700a292904991be1bd857c.png)
40
40
 
41
41
  ```
42
42
 

2

修正

2021/05/27 14:04

投稿

KkkRrr99
KkkRrr99

スコア6

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,16 @@
30
30
 
31
31
 
32
32
 
33
+ ### 発生している問題・エラーメッセージ
34
+
35
+
36
+
37
+ ```
38
+
39
+ ![イメージ説明](0c91e0fb8959872a12bab35ce5e60760.png)
40
+
41
+ ```
42
+
33
43
 
34
44
 
35
45
 
@@ -42,7 +52,23 @@
42
52
 
43
53
  ```JavaScript
44
54
 
55
+
56
+
57
+ //登録画面の表示
58
+
59
+ $("#forRegister").on("click", function() {
60
+
61
+ $.ajax({
62
+
63
+ url: "/employee/forSearch",
64
+
65
+ type: "GET",
66
+
67
+ contentType: "application/json",
68
+
69
+ })
70
+
45
- .done(function(user, textStatus, jqXHR) {
71
+ .done(function(user, textStatus, jqXHR) {
46
72
 
47
73
  $("#p1").empty();
48
74
 
@@ -86,16 +112,200 @@
86
112
 
87
113
  }
88
114
 
115
+
116
+
89
-
117
+ if ($("#employee_code").val() === null || $("#employee_code").val() === "") {
90
-
118
+
91
- if ($("#employee_code") === null) {
119
+ alert("社員番号を入力してください。");
92
120
 
93
121
 
94
122
 
95
123
  }
96
124
 
125
+ if ($("#employee_code").val().length === 6) {
126
+
127
+ alert("6文字で入力してください。");
128
+
129
+
130
+
131
+ }
132
+
133
+
134
+
135
+
136
+
137
+ })
138
+
139
+ .fail(function(jqXHR, textStatus, errorThrown) {
140
+
141
+ $("#p1").text(jqXHR.status); //例：404
142
+
143
+ })
144
+
145
+ .always(function() {});
146
+
147
+ });
148
+
149
+
150
+
151
+
152
+
153
+ //登録する
154
+
155
+ $(document).on("click", "#register", function() {
156
+
157
+ var json1 = {
158
+
159
+ employee_code: $("#employee_code").val(),
160
+
161
+ employee_name: $("#employee_name").val(),
162
+
163
+ furigana: $("#furigana").val(),
164
+
165
+ mail_address: $("#mail_address").val(),
166
+
167
+ tel_no: $("#tel_no").val(),
168
+
169
+ affiliation_group_code: $("#affiliation_group").val(),
170
+
171
+ position_code: $("#position").val(),
172
+
173
+ };
174
+
175
+ $.ajax({
176
+
177
+ url: "/employee/register",
178
+
179
+ type: "POST",
180
+
181
+ contentType: "application/json",
182
+
183
+ data: JSON.stringify(json1),
184
+
185
+ dataType: "json",
186
+
187
+ })
188
+
189
+ .done(function(userList, textStatus, jqXHR) {
190
+
191
+ $("#p1").empty()
192
+
193
+ $("#p1").append('<h4>登録が完了しました</h4>')
194
+
195
+ })
196
+
197
+ .fail(function(jqXHR, textStatus, errorThrown) {
198
+
199
+ $("#p1").text(jqXHR.status);
200
+
201
+ })
202
+
203
+ .always(function() {});
204
+
205
+ });
206
+
207
+
208
+
97
209
  ```
98
210
 
211
+ ```java
212
+
213
+ @RestController
214
+
215
+ @RequestMapping("/employee")
216
+
217
+ public class DBA_Employee_Controller {
218
+
219
+
220
+
221
+ private final Office_Worker_Service office_worker_service;
222
+
223
+
224
+
225
+ @Autowired
226
+
227
+ public DBA_Employee_Controller(Office_Worker_Service office_worker_service) {
228
+
229
+
230
+
231
+ this.office_worker_service = office_worker_service;
232
+
233
+ }
234
+
235
+
236
+
237
+ @PostMapping("/register")
238
+
239
+ @ResponseBody
240
+
241
+ public User register(@RequestBody UserForm userForm) {
242
+
243
+
244
+
245
+ User user = new User();
246
+
247
+
248
+
249
+ user.setEmployee_code(userForm.getEmployee_code());
250
+
251
+ user.setEmployee_name(userForm.getEmployee_name());
252
+
253
+ user.setFurigana(userForm.getFurigana());
254
+
255
+ user.setMail_address(userForm.getMail_address());
256
+
257
+ user.setTel_no(userForm.getTel_no());
258
+
259
+ user.setAffiliation_group_code(userForm.getAffiliation_group_code());
260
+
261
+ user.setPosition_code(userForm.getPosition_code());
262
+
263
+
264
+
265
+ office_worker_service.insert(user);
266
+
267
+
268
+
269
+ return user;
270
+
271
+ }
272
+
273
+
274
+
275
+
276
+
277
+ @GetMapping("/select")
278
+
279
+ @ResponseBody
280
+
281
+ public List<List<CodeMast>> select(){
282
+
283
+
284
+
285
+ List<CodeMast> AffiliationGroup = office_worker_service.AllAffiliationGroup();
286
+
287
+ List<CodeMast> Position = office_worker_service.AllPosition();
288
+
289
+
290
+
291
+ List<List<CodeMast>> list = new ArrayList<List<CodeMast>>();
292
+
293
+
294
+
295
+ list.add(AffiliationGroup);
296
+
297
+ list.add(Position);
298
+
299
+
300
+
301
+ return list;
302
+
303
+ }
304
+
305
+
306
+
307
+ ```
308
+
99
309
 
100
310
 
101
311
  ### 試したこと

1

修正

2021/05/27 14:03

投稿

KkkRrr99
KkkRrr99

スコア6

test CHANGED
File without changes
test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
 
28
28
 
29
- できれば、こういう感じみたいに、コードを書いて送ってくれると嬉しいです。
29
+ できれば、こういう感じ書くんだよみたいな感じで、コードを書いて送ってくれると嬉しいです。
30
30
 
31
31
 
32
32