質問編集履歴
3
p
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -13,93 +13,4 @@
|
|
|
13
13
|
➁上記で述べたようにしたいのですが、お名前からカーソルが外れて、その値が間違っているとき、なぜか下の各欄のエラー文もでてしまいます。
|
|
14
14
|
|
|
15
15
|
どなたかご教授いただけると嬉しいです。
|
|
16
|
-
```html
|
|
17
|
-
<form name="target">
|
|
18
|
-
お名前<br>
|
|
19
|
-
<input type="text" id="onamae" onblur="validation()">
|
|
20
|
-
<br>
|
|
21
|
-
<p class="err"></p>
|
|
22
|
-
メールアドレス<br>
|
|
23
|
-
<input type="text" id="email" name="mail" onblur="validation()">
|
|
24
|
-
<br>
|
|
25
|
-
<p class="err"></p>
|
|
26
|
-
メールアドレス(確認用)<br>
|
|
27
|
-
<input type="text" id="email1" name="mail" onblur="validation()">
|
|
28
|
-
<br>
|
|
29
|
-
<p class="err"></p>
|
|
30
|
-
性別<br>
|
|
31
|
-
男<input type="radio" id="radio" name="radio" onblur="validation()">
|
|
32
|
-
女<input type="radio" id="radio" name="radio" onblur="validation()">
|
|
33
|
-
<p class="err"></p>
|
|
34
|
-
<input type="button" value="送信" id="submit1" onclick="validation_click()">
|
|
35
|
-
<p class="err"></p>
|
|
36
|
-
</form>
|
|
37
|
-
```
|
|
38
|
-
```javascript
|
|
39
|
-
let err = document.getElementsByClassName("err");
|
|
40
16
|
|
|
41
|
-
|
|
42
|
-
function validation(){
|
|
43
|
-
validation_click();
|
|
44
|
-
let onamae = document.getElementById("onamae").value;
|
|
45
|
-
if(onamae.match(/^[^\x01-\x7E\^０-９]{1,20}$/)){ //matchを使って正規表現にマッチしてるか
|
|
46
|
-
err[0].innerHTML = "";
|
|
47
|
-
}else{
|
|
48
|
-
err[0].style.color = "red"; //マッチしなかったらエラー文
|
|
49
|
-
err[0].innerHTML = "全角1〜20文字で入力してください";
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
let email = document.getElementById("email").value;
|
|
53
|
-
console.log(email);
|
|
54
|
-
if(email.match(/^[a-zA-Z0-9_+-]+(\.[a-zA-Z0-9_+-]+)*@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/)){
|
|
55
|
-
err[1].innerHTML = "";
|
|
56
|
-
}else{
|
|
57
|
-
err[1].style.color = "red"; //マッチしなかったらエラー
|
|
58
|
-
err[1].innerHTML = "メールアドレスが不正です";
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
let email1 = document.getElementById("email1").value;
|
|
62
|
-
if(email === email1){
|
|
63
|
-
err[2].innerHTML = "";
|
|
64
|
-
}else{
|
|
65
|
-
err[2].style.color = "red";
|
|
66
|
-
err[2].innerHTML = "入力したメールアドレスと異なっています";
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
let flag = false;
|
|
70
|
-
for(let i = 0;i < document.target.radio.length;i++){
|
|
71
|
-
if(document.target.radio[i].checked){
|
|
72
|
-
flag = true;
|
|
73
|
-
err[3].innerHTML = "";
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
if(!flag){
|
|
77
|
-
err[3].innerHTML = "";
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function validation_click(){
|
|
82
|
-
let checklist = [
|
|
83
|
-
onamae.value,
|
|
84
|
-
email.value,
|
|
85
|
-
email1.value,
|
|
86
|
-
radio
|
|
87
|
-
];
|
|
88
|
-
let submit1 = document.getElementById("submit1");
|
|
89
|
-
for(i = 0;i < checklist.length;i++){
|
|
90
|
-
console.log(checklist);
|
|
91
|
-
if(checklist = []){
|
|
92
|
-
err[0].style.color = "red";
|
|
93
|
-
err[0].innerHTML = "値を入力してください";
|
|
94
|
-
err[1].style.color = "red";
|
|
95
|
-
err[1].innerHTML = "値を入力してください";
|
|
96
|
-
err[2].style.color = "red";
|
|
97
|
-
err[2].innerHTML = "値を入力してください";
|
|
98
|
-
err[3].style.color = "red";
|
|
99
|
-
err[3].innerHTML = "選択してください";
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
```
|
2
コード
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
どなたかご教授いただけると嬉しいです。
|
|
16
16
|
```html
|
|
17
|
-
<form name="target"
|
|
17
|
+
<form name="target">
|
|
18
18
|
お名前<br>
|
|
19
19
|
<input type="text" id="onamae" onblur="validation()">
|
|
20
20
|
<br>
|
1
文
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
現在バリデーションをしています。
|
|
2
2
|
|
|
3
3
|
**やりたいこと**
|
|
4
|
+
➀validation_click()のif文で全記入欄に何も入っていない時にクリックをしたら、それぞれの適したエラー文が出る、そこから記入欄に記入し、全て合っている時は送信ボタンを押せる
|
|
4
|
-
|
|
5
|
+
一つでも未記入＆間違っているものがあればボタンは押せない
|
|
5
6
|
➁エラーを１つ１つ出したい
|
|
6
7
|
例 お名前の欄からカーソルがそれた時、正しい名前が入っていればお名前のエラーはでない
|
|
7
8
|
正しくないものがはいった場合エラーがお名前の下に出る
|
|
8
9
|
その間、他の欄は記入していないため何も起きないようにする
|
|
9
10
|
|
|
10
11
|
**詰まっていること**
|
|
11
|
-
➀送信ボタンを条件によって止める方法がわからず、return falseやdisabledを使ってみましたが、何も入っていない時にボタンをクリックしたらエラーが出る
|
|
12
|
+
➀送信ボタンを条件によって止める方法がわからず、return falseやdisabledを使ってみましたが、何も入っていない時にボタンをクリックしたらエラーが出るが、その後の正誤判定ができず、return falseやdisabledをうまく使えなくて全部記入したのに押せなかったりと、よくわかりませんでした。
|
|
12
13
|
➁上記で述べたようにしたいのですが、お名前からカーソルが外れて、その値が間違っているとき、なぜか下の各欄のエラー文もでてしまいます。
|
|
13
14
|
|
|
14
15
|
どなたかご教授いただけると嬉しいです。
|