formのpattern属性の電話番号の正規表現のみうまくいかない

Question

WordPressのプラグインであるMW WP Formを使ってフォームの構築をしています。
フロント側でのバリデーションチェックにpattern属性を使用しようとしています。
01-0123-0123としても0101230123としても指定された形式で入力してくださいと出てしまいます。

ご教授いただけますと幸いです。

管理画面の該当部分

[mwform_text name='phone' class='required phone' placeholder='000-0000-0000']

jsでrequired属性とpattern属性を付与しています

	$(function(){
		$('.required').prop('required', true);
		$('.phone').attr('pattern', '\d{2,4}-\d{3,4}-\d{3,4}');
	})

検証画面で表示されるhtml

<input type="text" name="phone" class="required phone" size="60" value="" placeholder="000-0000-0000" required="" pattern="\d{2,4}-\d{3,4}-\d{3,4}">

#試してみたこと
別の正規表現ではどうかと思い、下記を行ったところ問題なく3文字目を入力するとうまくいきました。

	$(function(){
		$('.required').prop('required', true);
		$('.phone').attr('pattern', '.{3,}');
	})

Answer 1

この問題を解決するには、バックスラッシュを２重にします。

$('.phone').attr('pattern', '\d{2,4}-\d{3,4}-\d{3,4}');

文字列リテラルの中では、バックスラッシュがエスケープシーケンス（It's とかを文字列にするときに使うやつ：'It\'s'）の始まりになってしまうので、\d{2,4}-\d{3,4}-\d{3,4} は d{2,4}-d{3,4}-d{3,4} の文字列になります。そのため、修正前の HTML では d{2,4}-d{3,4}-d{3,4} を input に入力すると、OK になってしますはずです。

文字列リテラルの中でバックスラッシュをバックスラッシュとして出したいときは、\ と書きます。

あるいは、正規表現を文字列にする .source を使って以下のように書くのもよいでしょう。

$('.phone').attr('pattern', /\d{2,4}-\d{3,4}-\d{3,4}/.source);

正規表現を正規表現として書けるので、お使いのエディタによっては、こちらの方が便利かもしれません。

Comments

[raidomaru]

できました！ありがとうございます！