[ほたる]

本件について模索しましたが、やはり「外側からバリデーションをかけた上で、常に有効にする」という方法が分からず、先日の投稿内に記載しました下記のかたちで実装することにいたしました。

今回はバリデーション前でのみpattern属性が有効という前提で実装させていただきたいと思います。

ブラウザでバリデーションがかからない理由にも納得いたしましたので、大変勉強になりました。ありがとうございます。

以上で閉じさせていただきます。

♥ 1

いいねをした人:

[ほたる]

お忙しいところ、詳しくご回答いただきありがとうございます。
以前MW WP Formを使用させていただいていたのですが、電話番号のバリデーションについては実装方法が異なっているのですね。
ブラウザ側でのバリデーションとのこと、理解いたしました。

telに対する挙動について調べたところ、キタジマさんのおっしゃる通り、値についての検証はされないようでした。

 <input type=”email”> や <input type=”url”> とは異なり、送信前に値が特定の書式であると自動的には検証されません。電話番号の書式は世界中で様々だからです。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/tel

今回制作しているフォームで入力が想定されるのは日本の電話番号のみのため、JavaScriptでpattern="[0-9]+"の設定を試してみました。
フォームにアクセスした時点では有効でしたが、一度バリデーションがかかるとpattern属性が消えてしまい、希望通りの挙動にはできていない状態です。

JavaScriptの技術的な質問となってしまうかもしれませんが、後付けしたpattern属性をバリデーション後も残すということは不可能でしょうか。
難しい場合は、今回はバリデーション前でのみpattern属性が有効という前提で実装させていただきたいと思います。

♥ 1

いいねをした人:

[投稿者]

投稿