Web制作

jQuery Validation Pluginが使用されているフォームに、2度押し防止設定をする

問い合わせフォーム2度押し防止を作ろうとした時の話。
「jQuery 2度押し防止」でググったところ、こんな感じの解決策が出てきた。

$(function () {
 $('#form').submit(function () {
  $('#submit').prop('disabled', 'true');
 });
});

要するに、「formが送信されたらsubmitボタンをdisabledにしてしまい、クリックできないようにする」という方法らしい。
これでええやんと思ったのだが、落とし穴。このやり方だと、
「1回でも送信ボタンを押してしまったらボタンが押せなくなってしまう」。
つまり、必須項目を入力してない等で正常にフォームが送信されなかった場合でも、ボタンが押せなくなってしまうのだ。これだと、too badだ。

ちなみにフォームには「jQuery Validate Plugin」を使ってバリデーション機能を実装している。
上記の書き方だと、バリデーションで引っかかるような（＝必須項目に入力してないなど）入力状態でボタンを押したとしても、2度とボタンが押せないという困った状態なのだ。
バリデーションで引っかからなかったsubmitだけ、ボタンを非活性にする方法は何か無いかと色々調べたりなんなりした結果が下記。

successやnumberOfInvalidsメソッドを使う

(validateのルールやメッセージは仮です)

letisError=true;
letvalidator=$('#form').validate({
 rules: {
  company: {
   required:false,
  },
 },
 messages: {
  company: {
   required:'会社名を入力してください。',
  },
 },
 success:function(error, element) {
  $('#form').on('submit', function(e){
   if (validator.numberOfInvalids() ==0&&isError) {
    isError=false;
    $('#submit').css('pointer-events','none');
    $('#submit').css('opacity','0.7');
    onSubmit(e);
   }
  })
 },
});

これであれば「バリデーションの結果エラーがなければ、submitのpointer-eventsを無効にしろよ」という指示になるので、求めている機能が実装できた。ちゃんちゃん。

TOP