Question

我一直在使用带有3d内置程序栏的动画提交按钮在此网站上工作：

对于提交按钮，我使用了这个插件：

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

一切都很美妙，装载栏运行顺畅，表单提交没有问题。问题是验证，它似乎不起作用。提交按钮（＆＃34; Enviar＆＃34;）是一个按钮标签。当我为输入标签更改它时，验证工作，但proggress栏没有，反之亦然。我尝试用输入标签重现效果，但它没有用。所以我尝试了表单验证，这似乎更平易近人。我在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通话来说并不是很好......我想你可以做一些有效的事情{{1使用readyState事件的XHR对象，但通常大多数这样的AJAX进度指示器都是某种类型的循环动画。

表单验证不使用progressButton js

1 个答案: