javascript - 表单验证不适用于 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 构造函数的单击处理程序中，以便动画与验证同步发生。例如，您可以在验证服务返回成功时触发动画，或者如果出现错误，您可以对按钮执行其他操作。但是所有这一切都应该从单个处理程序中发生，因为验证是异步发生的，而现在，由于动画和验证是从两个不同的处理程序发生的，这两个处理程序都是通过单击按钮触发的，因此您无法同步这两个处理程序进程向上。

所以我在想这样的事情:

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 对象的 readState 使用 onreadystatechange 事件，但大多数情况下，像这样的大多数 AJAX 进度指示器都是某种类型的循环动画。