Question

当我提交表单而不填写任何信息时，它会快速显示错误消息然后淡出。如果没有错误消息并且验证成功，我只希望表单淡出。我想我可能需要使用if语句来成功或者使用提交处理程序吗？

到目前为止，我有这个 - https://jsfiddle.net/wnmLmcm8/

$(document).ready(function () {

  $("form").submit(function (e) {
    e.preventDefault();
    $.ajax({
      type: this.method,
      url: this.action,
      data: {
        name: $('#name').val(),
        email: $('#email').val()
      },
      success: function () {
        $('#emailform').fadeOut("slow");
      }
    });
  });

  $("form").validate({
    rules: {
      email: {
        required: true,
        email: true,
        remote: "http://localhost:3000/inputValidator"
      }
    }
  });
});

Answer 1

以下是jsFiddle的工作版本：https://jsfiddle.net/ywhpdLen/3/

此代码段基于您的jsFiddle工作，但您的jsFiddle不起作用。我不得不在本地将代码拉入我自己的开发环境。

弹出窗口一直保持到您单击文本字段为止。

添加＆＃34;必需＆＃34;到输入元素＆amp;使用默认的＆＃34; .validate（）＆＃34;扩展工作。如果您希望自定义它，我强烈建议您查看https://jqueryvalidation.org/documentation/

<div id="emailform">
    <form method="post" action="form.php">
        <hr>
        <label for="name">Name</label>
        <br>
        <input type="text" name="name" id="name" class="NewsLetter1" required/>
        <br>
        <label for="email">Email</label>
        <br>
        <input type="text" name="email" id="email" class="NewsLetter2" required/>
        <input type="submit" value="Submit">
        <hr>
    </form>
</div>

<script>
    $(document).ready(function () {

        $("form").submit(function (e) {
            e.preventDefault();
            $.ajax({
                type: this.method,
                url: this.action,
                data: {
                    name: $('#name').val(),
                    email: $('#email').val()
                },
                success: function () {
                    $('#emailform').fadeOut("slow");
                },
                failure: function (ex) {

                }
            });
        });

        $("form").validate();
    });

</script>

每条评论，如下：看起来你的ajax调用仍在发生，而form.submit（）正在启动。您可能希望删除form.submit（）调用并将其包含在validate调用中，如此。

 $("form").validate({
    submitHandler:function(form){

          $.ajax({....})
    }

  });

Answer 2

使用像...这样的提交处理程序来执行此操作。

ColumnA ColumnB ColumnC ColumnD ColumnE
1234      xyz     123.4   1      abc123
4258      acv     785.6   0      abs58
785       fgf     879.6   1      ftrd15
448       wsd   87878.6   0      wewe
78528     ews    6968.2   1      awaq
525554    qwe       2.3   0      afgd87

Answer 3

尝试将您的ajax放入submitHandler验证插件

  $("form").validate({
    rules: {
      email: {
        required: true,
        email: true,
        remote: "http://localhost:3000/inputValidator"
      }
    },
    submitHandler:function(form){

          $.ajax({....})
    }

  });

遇到问题时，请使用debug:true

Answer 4

用于即时解决方案使用＆＃34;必需＆＃34; https://jsfiddle.net/et7qcrye/

   <input type="text" name="name" id="name" class="NewsLetter1" required/>

表单验证成功

4 个答案: