Javascript 表单验证不适用于progressButton js

我一直在使用带有3d内置进度条的动画提交按钮开发此网站：

对于提交按钮，我使用了以下插件：

一切都运行得很好，加载栏运行平稳，表单提交没有问题。问题在于验证，它似乎不起作用。submit按钮（“Enviar”）是一个按钮标签。当我将其更改为输入标记时，验证工作正常，但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> 

羡慕

这里是验证（我接管项目时的原始代码，没有尝试）：

$（文档）.ready（函数（e）{
$（“按钮”#Btneviar”）。单击（功能（e）{
var nome=$（“#edtNome”）.val（）；
var mail=$（“#edtmail”）.val（）；
var fone=$（“#edtTelefone”）.val（）；
var mensage=$（“#edtMensagem”）.val（）；
$.ajax({
键入：“POST”，
url:“envia_mail_a2.php”，
//上下文：document.body，
//数据类型：“文本”，
数据：“nome=“+nome+”&mail=“+mail+”&fone=“+fone+”&mensagem=“+mensagem，
成功：函数（）{
//警报（'Enviado com sucesso'）
setInterval（函数（）{
美元（“#edtNome”）.val（“”）；
$（“#edtmail”）.val（“”）；
美元（“#edtTelefone”）.val（“”）；
美元（“#edtmensage”）.val（“”）；
}, 3000);
},
错误：函数（）{
警报（“Erro ao enviar”）；
}
});
});
});

---

再次感谢大家的关注

在查看页面上的代码后，当调用

new ProgressButton

时，有两个参数传递给构造函数。。。按钮HtmleElement将通过插件转换为进度按钮，以及一个回调函数，用于确定单击新创建的进度按钮时会发生什么。现在，在进度按钮上有两个单击处理程序。一个是传递到

newprogressbutton（）

调用中的，另一个是粘贴在上面的，在文档准备就绪时创建的。传递到

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调用来说不是很好，因为您无法真正知道调用的“进度”是什么。。。我想您可以使用

onreadystatechange

事件来关闭XHR对象的

readyState

，但通常情况下，像这样的大多数AJAX进度指示器都是某种类型的循环动画。

感谢您的快速回复，但它不起作用，bttn未定义。我将按照您的建议尝试使用readyState，是否允许我在此项目上有更多时间：）

bttn

应该是

元素。。。如果未定义它，则通过如下方式为其分配HTML

元素来定义它：

var bttn=document.getElemementById（“btnEnviar”）通过指定HTML元素来定义bttn，表单提交或插件都不起作用。在查看原始页面上的代码时，
bttn
的值不应未定义。。。有办法知道你现在在做什么吗？
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
                }
             });
         });
    }
} );