Jquery表單驗證插件 - 如何提交一個額外的步驟？

Question

我目前使用的Jquery form validation plugin，而且效果很好，當我跟着它的網頁上表單提交指令：

$("#form").validate({ 
    submitHandler: function(form) { 
     form.submit(); 
    } 
}); 

不過，現在我需要的用戶後添加彈出警告框，點擊提交按鈕，那麼他們需要在提交表單之前點擊彈出框上的按鈕。

所以它需要：

1. 填寫表格，點擊提交按鈕
2. 彈出框顯示了一個按鈕，點擊該按鈕
3. 表單提交

我已嘗試此操作但觸發無響應：

$("#form").validate({ 
    submitHandler: function(form) { 
     $('.popup').show(); 
     $('.popup').find('.button').click(function(){ 
      form.submit(); 
     });   
    }  
}); 

Answer 1

發生了什麼，驗證過程中是否顯示彈出對話框，如果驗證成功，表單將在用戶有機會看到彈出窗口之前提交。

有類似的問題或許JavaScript Submithandler Issue

更理想的是，你需要改變你的形式，所以你實際上提交表單之前可能出現的對話框。
即

1. 填寫表格
2. 點擊定期按鈕，顯示彈出
3. 提交表單

這樣，你不驗證，並在彈出的混合在一起。

Answer 2

使用「的」命令

http://api.jquery.com/on/

會發生什麼事是你的DOM元素創建或可見後的文件被加載。這將附加任何出現的新DOM的事件處理程序。

喜歡的東西：

$('body').on('click','.button',function(){ 
    form.submit(); 
}); 

下面是解釋ON所做的優秀文章：

http://www.jquery4u.com/jquery-functions/on-vs-live-review/

Answer 3

感謝您的幫助。我最終做的是在表單動作中添加一個參數?submitted=true，所以它仍然是相同的頁面，但在url中有一個參數。然後檢查網址，看看是否有這樣的參數並相應地執行彈出。不知道它是否愚蠢，但它是我能想到的最簡單的方法。

Answer 4

嗯，我想你真的不需要這個了。好吧。無論如何，我都會爲後人發佈它。

HTML

<form id="form"> 
    <fieldset> 
     <legend>Please provide the following...</legend> 
     <p> 
      <label for="cname">Name (required, at least 2 characters)</label> 
      <input id="cname" name="name" minlength="2" type="text" required /> 
     </p> 
     <p> 
      <label for="cemail">E-Mail (required)</label> 
      <input id="cemail" type="email" name="email" required /> 
     </p> 
     <p> 
      <label for="curl">URL (optional)</label> 
      <input id="curl" type="url" name="url" /> 
     </p> 
     <p> 
      <label for="ccomment">Your comment (required)</label> 
      <textarea id="ccomment" name="comment" required></textarea> 
     </p> 
     <p><input class="submit" type="submit" value="Submit"/></p> 
    </fieldset> 
</form> 
<div id="Achtung"> 
    <h1>Achtung!</h1> 
    <p>You are about to provide the indicated information. Please be sure!</p> 
</div>​ 

的Javascript

(function env($, log) { 
    $(function load() { 
     var $form = $("#form"), 
      form = $form[0], 
      $Achtung = $('#Achtung'), 
      valid = {submitHandler: Achtung}; 

     $form.validate(valid); 

     function Achtung() { 
      var buttons = [ 
        {text: "Ok", click: ok}, 
        {text: "Cancel", click: close} 
       ], 
       dialog = {modal: true, buttons: buttons}; 

      $Achtung.dialog(dialog); 

      function ok(event, ui) { 
       close(event, ui, "Submit Ok'd and will continue."); 
       form.submit(); 
      } 

      function close(event, ui, msg) { 
       log(msg || 'Submit canceled by user.'); 
       $Achtung.dialog("close"); 
      } 
     } 

     // Just so the form does not submit; comment these 
     // lines to verify it works. 
     form.submit = function blocker(event, ui) { 
      return !log('The form.submit() was triggered and canceled.'); 
     }; 

     fill(); 
    }); 

    // Nothing to see here... 
    function fill(){ 
     var $els = $(':input[type!=submit], textarea'), 
      d = ['oh', 'a@b.cd', location.href, 'oh'], 
      $el; 

     $.each(d, function fill(i, v){ 
      $el = $($els[i]); 
      $el.is('input') ? $el.val(v) : $el.text(v); 
     }); 
    } 

})(jQuery, function z(){return !console.log.apply(console, arguments)});​ 

http://jsfiddle.net/userdude/jULBx/