回答編集履歴
2
check 関数
answer
CHANGED
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
<input type="text" name="name" pattern="^[\s\S]+$" data-errormessage="氏名を入力してください">
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
### check 関数
|
|
24
|
+
|
|
25
|
+
変数 `flag` でフラグ管理されているようですが、返り値を Boolean 型 (true, false) にした方がスマートだと思います。
|
|
26
|
+
前述のpattern属性で実装する場合は、必要な時に自動的にバリデーション処理が行われるので能動的にチェック処理を走らせる必要はありませんが、カスタムエラーメッセージの為に `setCustomValidity` を事前実行する必要はあります。
|
|
27
|
+
|
|
23
28
|
### document.form.katakana
|
|
24
29
|
|
|
25
30
|
> ```JavaScript
|
1
エラーメッセージを追加
answer
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
元のコードを尊重するなら配列を使えば良いですが、
|
|
4
4
|
|
|
5
5
|
```JavaScript
|
|
6
|
-
var tokens = [['name', /^$/], ['katakana', /[^ァ-ン]/], ['mail', /[^a-zA-z?s]+$/], ['yubin', /[^0-9]/]];
|
|
6
|
+
var tokens = [['name', /^$/, '氏名を入力してください'], ['katakana', /[^ァ-ン]/, 'フリガナはカタカナで入力してください'], ['mail', /[^a-zA-z?s]+$/, 'メールアドレスを正しく入力してください'], ['yubin', /[^0-9]/, '郵便番号は数字で入力してください']];
|
|
7
7
|
|
|
8
8
|
for (var i = 0, l = tokens.length; i < l; ++i) {
|
|
9
9
|
// 処理
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
- [HTML5 で優れたフォームを作成する - HTML5 Rocks](https://www.html5rocks.com/ja/tutorials/forms/html5forms/)
|
|
18
18
|
|
|
19
19
|
```HTML
|
|
20
|
-
<input type="text" name="name" pattern="^[\s\S]+$">
|
|
20
|
+
<input type="text" name="name" pattern="^[\s\S]+$" data-errormessage="氏名を入力してください">
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
### document.form.katakana
|