BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] jQuery .validate() submitHandler が起動しない

2022-02-12 23:06:34

質問

を使用してオンザフライで作成されたフォームでダイアログボックスを読み込んでいます。 Bootbox.js そして、jQuery validateプラグインでユーザーの入力を検証しています。

バリデーションは問題なく動作しますが submitHandler は、フォームへの入力が成功した場合、無視されます。

何が問題なのでしょうか？ 

submitHandler: function(form) {
    alert("Submitted!");
    var $form = $(form);
    $form.submit();
}

以下の完全な例をご覧ください。同じような問題が提起されている他の投稿も見てみました。残念ながら、彼らはフォームをページ上にレンダリングしているようですが、私はjQuery経由でレンダリングしています。 

$(document).on("click", "[data-toggle=\"contactAdmin\"]", function() {
  bootbox.dialog({
    title: "Contact admin",
    buttons: {
      close: {
        label: 'Close',
        className: "btn btn-sm btn-danger",
        callback: function() {}
      },
      success: {
        label: "Submit",
        className: "btn btn-sm btn-primary",
        callback: function() {
          $("#webteamContactForm").validate({
            rules: {
              requestType: {
                required: true
              }
            },
            messages: {
              requestType: {
                required: "Please specify what your request is for",
              }
            },
            highlight: function(a) {
              $(a).closest(".form-group").addClass("has-error");
            },
            unhighlight: function(a) {
              $(a).closest(".form-group").removeClass("has-error");
            },
            errorElement: "span",
            errorClass: "help-blocks",
            errorPlacement: function(error, element) {
              if (element.is(":radio")) {
                error.appendTo(element.parents('.requestTypeGroup'));
              } else { // This is the default behavior 
                error.insertAfter(element);
              }
            },
            submitHandler: function(form) {
              alert("Submitted!");
              var $form = $(form);
              $form.submit();
            }
          }).form();
          return false;
        }
      }
    },
    message: '<div class="row">  ' +
      '<div class="col-md-12"> ' +
      '<form id="webteamContactForm" class="form-horizontal" method="post"> ' +
      '<p>Please get in touch if you wish to delete this content</p>' +
      '<div class="form-group"> ' +
      '<div class="col-md-12"> ' +
      '<textarea id="message" name="message" class="form-control input-md" rows="3" cols="50">This email is to notify you the creator is putting a request for the following item\n\n' +
      this.attributes.getNamedItem("data-url").value + '\n\n' + '</textarea> ' +
      '<span class="help-block">Feel free to change the message and add more information. Please ensure you always provide the link.</span> </div> ' +
      '</div> ' +
      '<div class="form-group requestTypeGroup"> ' +
      '<label class="col-md-4 control-label" for="requestType">This request is for:</label> ' +
      '<div class="col-md-4"> <div class="radio"> <label for="Edit"> ' +
      '<input type="radio" name="requestType" id="requestType-0" value="Edit"> ' +
      'Editing </label> ' +
      '</div><div class="radio"> <label for="Delete"> ' +
      '<input type="radio" name="requestType" id="requestType-1" value="Delete"> Deletion</label> ' +
      '</div> ' +
      '</div> </div>' +
      '</form> </div>  </div>'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>

<a data-toggle="contactAdmin" data-title="help" data-url="http:/www.mydomain.com/some-url" href="#">Contact Web team</a>

jsFiddleで見る

解決方法は？

jsFiddleのDOMを検査すると、2つの問題が明らかになる。

  1. あなたの"submit"。 <button> は type="button" .

  2. 送信ボタンが <form></form> のコンテナを使用します。

jQuery Validate プラグインに、自動的に click イベント(submit" ボタン)...

  • は、ボタンが type="submit"
  • ボタンは <form></form> コンテナに格納されます。

この2つの条件は、プラグインを意図したとおりに動作させたい場合に満たす必要があります。

また .validate() メソッドを success モーダルダイアログボックスの "submit" ボタンのコールバック。

は .validate() メソッドは 初期化 と呼ばれる必要があります。 一度だけ を、フォームが作成された後に実行します。

EDIT :

これを弄った後、明らかになるのは Bootbox モーダルプラグイン は、フォームの送信を妨害するいくつかの重大な制限がある可能性があります。

  1. Validateプラグインを初期化しています。 後 ダイアログが開かれます。

  2. を使っています。 .valid() メソッドで検証テストをトリガーします。

バリデーションを初期化して正常に動作させることはできますが、実際のフォーム送信が行われる前にダイアログが解除されてしまいます。 おそらく解決策があるのでしょうが、Bootbox のドキュメントを見ても、なかなか明らかにはなりません。

https://jsfiddle.net/vyaw3ucd/2/

EDIT 2:

OPの解答の通り...。 

bootbox.dialog({
    // other options,
    buttons: {
        success: {
            label: "Submit",
            className: "btn btn-sm btn-primary",
            callback: function () {
                if ($("#webteamContactForm").valid()) {
                    var form = $("#webteamContactForm");
                    form.submit();  // form submits and dialog closes
                } else {
                    return false;  // keeps dialog open
                }
            }
        }
    }
});

しかし、単に提供された form の引数を直接指定しても、エラーは発生しません。 submitHandler オプションを使用します。 

submitHandler: function (form) {
    console.log("Submitted!");
    form.submit();
}

DEMO https://jsfiddle.net/vyaw3ucd/5/

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します