表單驗證不適用於progressButton js

Question

我一直在使用帶有3d內置進度條的動畫提交按鈕在此網站上工作：

http://add.digital/contato.php

對於提交按鈕，我使用了此插件：

http://tympanus.net/codrops/2013/12/12/progress-button-styles/

一切正常，加載欄運行順暢，表單提交沒有問題。 問題是驗證，它似乎不起作用。 提交按鈕（“ Enviar”）是一個按鈕標簽。 當我將其更改為輸入標簽時，驗證有效，但進度條則無效，反之亦然。 我嘗試用輸入標簽重現效果，但是沒有用。 因此，我嘗試着進行表單驗證，這似乎更加平易近人。 我已經在SO和其他網站上找到了很多關於使用按鈕標簽進行表單驗證的解決方案，但是我得到的結果幾乎都是相同的：點擊“提交”按鈕時，空字段的錯誤消息是所示，但沒有人停止進度欄動畫和表單提交。 我也搜索了與Ladda.js相關的查詢，這是一個類似的插件，但是我找不到一種方法來驗證表單並在必要時停止動畫和提交。 我已經檢查了整個代碼（作為新手），並嘗試了許多不同的解決方案，但無法對此問題進行排序，這很煩人。 任何有關如何解決的幫助或指導將不勝感激。

形式如下：

   <form action="envia_mail_a2.php" method="POST">
      <div class="input-group">
         <label for="nome" class="hidden"></label>
         <input class="input-custom" type="text" placeholder="Nome"          name="edtNome" id="edtNome" required>
      </div>

      <div class="input-group">
         <label for="email" class="hidden"></label>
         <input class="input-custom" type="text" placeholder="E-mail"     id="edtEmail" name="edtEmail" required>
      </div>
      <div class="input-group">
         <label for="telefone" class="hidden"></label><input class="input-    custom" type="text" placeholder="Fone" id="edtTelefone" name="edtTelefone" required>
      </div>

      <div class="input-group">
         <label for="mensagem" class="hidden"></label>
         <textarea class="input-custom expanding" placeholder="Mensagem"       rows="1" name="edtMensagem" id="edtMensagem"></textarea>
      </div>

      <div class="input-group text-right">                
         <button type="submit" id="btnEnviar" name="btnEnviar" class="submit progress-button"  data-style="rotate-angle-bottom" data-perspective data-horizontal>Enviar</button>
      </div>
   </form> 

這里是驗證（原始代碼，就像我接管項目時一樣，沒有經過我的嘗試）：

    <script>
            $(document).ready(function(e) {
            $("button#btnEnviar").click(function(e) {
                var nome = $("#edtNome").val();
                var mail = $("#edtEmail").val();
                var fone = $("#edtTelefone").val();
                var mensagem = $("#edtMensagem").val();

                $.ajax({
                    type: 'POST',
                    url: "envia_mail_a2.php",
                    //context: document.body,
                    //dataType: 'text',
                    data:       "nome="+nome+"&mail="+mail+"&fone="+fone+"&mensagem="+mensagem,

                    success: function(){
                        //alert('Enviado com sucesso')
                        setInterval(function(){ 
                                $("#edtNome").val('');
                                $("#edtEmail").val('');
                                $("#edtTelefone").val('');
                                $("#edtMensagem").val('');
                            }, 3000);
                        },
                        error: function () {
                            alert('Erro ao enviar');
                        }
                    });
                });
            });
        </script>

再次感謝您的關注

Answer 1

查看頁面上的代碼后，調用new ProgressButton ，有兩個參數傳遞給構造函數：按鈕HTMLElement將通過插件轉換為進度按鈕，而回調函數將確定何時發生單擊新創建的進度按鈕。 現在，您在進度按鈕上有兩個單擊處理程序。 一個將傳遞到new ProgressButton()調用中，另一個將粘貼到上面的文件將在文檔准備好時創建。 傳遞給ProgressButton構造函數的一個是處理按鈕的動畫，而您上面粘貼的其他單擊處理程序則是在進行驗證。 您需要將驗證代碼移到要傳遞給ProgressButton構造函數的單擊處理程序中，以便動畫與驗證同步進行。 例如，您可以觸發動畫作為驗證服務success返回的結果，或者可以在出現錯誤時對按鈕執行其他操作。 但是所有這些都應該從單個處理程序發生，因為驗證是異步進行的，而現在，由於動畫和驗證是通過兩個不同的處理程序進行的，而這兩個處理程序都是通過單擊按鈕觸發的，因此您無法同步這兩個處理程序處理。

所以我在想這樣的事情：

new ProgressButton( bttn, {
    callback : function( instance ) {

         var nome = $("#edtNome").val();
         var mail = $("#edtEmail").val();
         var fone = $("#edtTelefone").val();
         var mensagem = $("#edtMensagem").val();

         var animation = function() {
             var progress = 0,
             interval = setInterval( function() {
                 progress = Math.min( progress + Math.random() * 0.1, 1 );
                 instance._setProgress( progress );
                 if( progress === 1 ) {
                     instance._stop(1);
                     clearInterval( interval );
                 }
            }, 200 );
         }

         $.ajax({
                type: 'POST',
                url: "envia_mail_a2.php",
                //context: document.body,
                //dataType: 'text',
                data:"nome="+nome+"&mail="+mail+"&fone="+fone+"&mensagem="+mensagem,

                success: function(){
                    //alert('Enviado com sucesso')
                    //call the animation
                    animation();
                    },
                error: function () {
                    alert('Erro ao enviar');
                    //do another animation if there is an error
                }
             });
         });
    }
} );

老實說，當您無法真正分辨出調用的“進度”是什么時，進度條對於AJAX調用來說並不是很好。我想您可以使用XHR對象的readyState來完成某些工作onreadystatechange事件，但通常大多數此類AJAX進度指示器都是某種類型的循環動畫。