表单验证不适用于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进度指示器都是某种类型的循环动画。