web-dev-qa-db-ja.com

jQuery .validate（）submitHandlerが起動しない

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

検証は正常に機能しますが、フォームに正常に入力されると、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で表示

jqueryjquery-validatebootbox
14
david-l

JsFiddleのDOMと2つの問題を調べると明らかになります。

  1. 「送信」_<button>_は_type="button"_です。

  2. 「送信」ボタンは_<form></form>_コンテナの外側にあります。

JQuery Validateプラグインで[送信]ボタンのclickイベントを自動的にキャプチャする場合...

  • ボタンは_type="submit"_でなければなりません
  • ボタンは_<form></form>_コンテナー内になければなりません。

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

また、モーダルダイアログボックスの[送信]ボタンのsuccessコールバック内に.validate()メソッドを誤って配置しました。

.validate()メソッドは、初期化プラグインにのみ使用され、呼び出される必要がありますonceフォームの作成後。

[〜＃〜] edit [〜＃〜]：

これをいじった後、 Bootbox modal plugin にはフォームの送信を妨げるいくつかの重大な制限があるかもしれないことが明らかになります。

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

  2. 「submit」内で.valid()メソッドを使用して、検証テストをトリガーしています。

検証を初期化して正常に動作させることはできますが、実際のフォーム送信が行われる前にダイアログは閉じられます。おそらく解決策はありますが、Bootboxのドキュメントを確認した後、それはすぐにはわかりません。

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

編集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引数を直接使用するだけで、jQuery ValidateプラグインのsubmitHandlerオプションを使用してもエラーは発生しません。

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

デモ： https://jsfiddle.net/vyaw3ucd/5/

24
Sparky

助けてくれたSparkyに感謝します。あなたが提供した解決策が私に答えを与えてくれました。 submitHandlerがあると、送信ロジックに混乱が生じるようです。

SubmitHandlerを削除し、成功コールバックに以下を追加しました。すべてが期待どおりに動作します

success: {
         label: "Submit",
         className: "btn btn-sm btn-primary",
         callback: function () {
             if($("#webteamContactForm").valid()){
                    var form = $("#webteamContactForm");
                    form.submit();
                } else {
                    return false;
                }
         }
    }
2
david-l

これは古い投稿であることは知っていますが、同様の問題に対する解決策を共有すると思いました。 Enterキーを押してフォームを送信することはできませんでしたが、入力時に検証することはできました。そのため、チェーン方式を使用し、入力時にフォームを送信できるようになりました。

jQuery：

  //Variables created without the keyword var, are always global, even if they are created inside a function.
    var form = $('#<?echo $PAGEID?>');
    var FormError = $('.alert-danger',form);
    var success = $('.alert-success',form);

     form.keypress(function(e){
         if(e.which == 13){ //TRIGGER SUBMIT THROUGH ENTER      
             document.getElementById('defaultActionButton').click(); 
         }
     }).validate({
        focusInvalid: false, // do not focus the last invalid input
        onkeyup: false, 
        ignore: ".ignore", //required for hidden input validation ie: hiddenRecaptcha
        rules:{
            "TYPE": {
                required: true,     
            },
            "MSG": {
                required: true,
                rangelength:[40,1000]
            },
            "CONTACT": {
                 required: {
                     depends: "#newuser:checked"
                 }
            },
            "EMAIL": {
                 required: true,
                 email: {
                    depends: function() {
                        if(!$("#newuser:checked"))
                            return true;
                        else
                            return false;
                    }
                 },
                 HTH_TelephoneEmail: {
                        depends: function() {
                            if($("#newuser:checked"))
                                return true;
                            else
                                return false;
                        }
                     }
            },          
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        messages: { // custom messages for form validation input
               "TYPE": {
                    required: 'Please select an option as it pertains to your inquiry'
               },
               "MSG": {
                    required: 'Please provide some content as it pertains to your inquiry'       
               },
               "CONTACT": {
                required: "Please enter a contact person or company"
               },
              hiddenRecaptcha: {
                required: function() {
                    $(".g-recaptcha:first").tooltip("enable").tooltip("show");
                }
              }
        },
        showErrors: function(errorMap, errorList) {
            // Clean up any tooltips for valid elements
            $.each(this.validElements(), function (index, element) {
                element = $(element);
                NoError_ToolTip(element);
            });
            // Create new tooltips for invalid elements
            $.each(errorList, function (index, error) {
                element = $(error.element);
                message = error.message;
                Error_ToolTip(element,message);
            });
        },                  
        invalidHandler: function (event, validator) { //display error alert on form submit     
            success.hide();
            $(document).scrollTop( $(".form-body").offset().top ); 
        },
         submitHandler: function () { 
       Submit_Complete(); //fires ajax call
   }
    });
1
yardpenalty

名前の競合があるため、送信ボタンの名前を変更する必要があります。たとえば、name="submit"からname="other"に変更してみてください。

0
Reimi Beta