回答編集履歴

1

調整

2019/08/07 11:19

投稿

yambejp
yambejp

スコア115976

test CHANGED
@@ -1,24 +1,40 @@
1
+ 修正しました
2
+
3
+
4
+
5
+ # 仕様
6
+
7
+ - .nameは入力必須
8
+
1
- まずバリデートの部分無視して、formの値を拾う処理
9
+ - .age入力必須かつ整数
2
10
 
3
11
 
4
12
 
5
13
  ```javascript
6
14
 
15
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
16
+
7
17
  <script>
8
18
 
9
19
  $(function(){
10
20
 
11
- $("#form_button").on('submit',function(e){
21
+ $("#form_button").on('click',function(e){
12
22
 
13
- e.preventDefault();
23
+ $(".name,.age").next('.err').text("");
14
24
 
15
- var checks=$("[name='check[]']:checked").map(function(){
25
+ });
16
26
 
17
- return $(this).val();
27
+ $(".name").on('invalid',function(e){
18
28
 
19
- }).get();
29
+ $(this).next('.err').text("入力必須です");
20
30
 
31
+ });
32
+
33
+ $(".age").on('invalid',function(e){
34
+
35
+ var err=$(this).val()==""?"入力必須です":"整数を指定してください";
36
+
21
- console.log(checks);
37
+ $(this).next('.err').text(err);
22
38
 
23
39
  });
24
40
 
@@ -26,7 +42,9 @@
26
42
 
27
43
  </script>
28
44
 
29
- <form method="form.php" id="form_button">
45
+ <form method="form.php" method="post">
46
+
47
+ <div>
30
48
 
31
49
  <label><input type="checkbox" name="check[]" value="1">1</label>
32
50
 
@@ -34,7 +52,21 @@
34
52
 
35
53
  <label><input type="checkbox" name="check[]" value="3">3</label>
36
54
 
55
+ </div>
56
+
57
+ <div>
58
+
59
+ name:<input type="text" name="name" class="name" value="" required><span class="err"></span>
60
+
61
+ </div>
62
+
63
+ <div>
64
+
65
+ age:<input type="text" name="age" class="age" value="" pattern="[0-9]+" required><span class="err"></span>
66
+
67
+ </div>
68
+
37
- <input type="submit" value="send">
69
+ <input type="submit" value="send" id="form_button">
38
70
 
39
71
  </form>
40
72