- このトピックには3件の返信、2人の参加者があり、最後に
により1年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】
Snow Monkey Forms 6.0.1【お使いのブラウザ】
Google Chome【当該サイトのURL】
制作中のため非公開とさせていただきます### 実現したいこと
WordPress 6.3.1にてサイト制作を行っており、Snow Monkey Formsを使用して問い合わせフォームを設置しております。
電話番号の入力欄は、数字以外を入力した際にエラーを表示させたいです。### 発生している問題
「Tel」のブロックを使用してフォームを作成しましたが、該当欄にひらがなや全角数字などを入れてもバリデーションが効かず、そのまま送信できてしまう状態です。
※未入力の場合については、その旨のエラー表示はされております### 試したこと
該当ブロックを一旦削除した上で改めて「Tel」ブロックを設置しましたが、変化はありませんでした。ユーザーの方のブログ記事なども拝見しましたが、通常では電話番号以外の形式で入力した場合はきちんとエラーが出るように見受けられました。
私の方で行った主なカスタマイズは、CSSでの装飾と、サンクスページへのリダイレクトなのですが、何か影響してしまう可能性がある点などありますでしょうか。初歩的な質問で大変恐縮ですが、お力添えいただけますと幸いです。よろしくお願いいたします。
いいねをした人: 居ませんTel ブロックは PHP 側ではバリデーションをおこなっておらず、
<input type="tel" />なフィールドを使ってブラウザ任せの実装にしています。ブラウザのバリデーションには詳しくないのですが、もしかしたら tel はバリデーションは実行されずにスマホのときにキーボードのタイプが変わるだけなのかもしれません。電話番号は国によってフォーマットが違うと思うので、URL ブロックのように自動的に PHP 側でバリデーションさせるのは難しいのかなと思うのですが、独自のバリデーションを追加できるように機能追加できたら良いかもですね…。
いいねをした人:お忙しいところ、詳しくご回答いただきありがとうございます。
以前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属性が有効という前提で実装させていただきたいと思います。いいねをした人:
- トピック「【Snow Monkey Forms】電話番号のバリデーションが効かない」には新しい返信をつけることはできません。