使用“验证”jquery插件提交表单时如何添加延迟

Question

我正在使用jQuery Validation Plugin对表单进行验证。

这是当前状态的演示： https : //jsfiddle.net/rrzddexr/1/

我希望验证通知出现在我可以指定的时间之后（例如 3000 毫秒），而不是像提供的演示那样在我单击提交后立即出现验证消息

我特别想要这个目的，因为我想在这个延迟内应用一些 js 代码，然后表单应用它的验证并显示它的结果。

我在 javascript 方面不专业。 我希望我清楚地描述了这一点。

HTML

<form id="contact-form" action="post">
<div class="form-group">
    <input type="text" name="cfName" id="cfName" class="form-control" placeholder="Your Name">
</div><!-- .form-group end -->
<div class="form-group">
    <input type="text" name="cfEmail" id="cfEmail" class="form-control" placeholder="Your Email">
</div><!-- .form-group end -->
<div class="form-group">
    <textarea  name="cfMessage" id="cfMessage" class="form-control" placeholder="Your Message"></textarea>
</div><!-- .form-group end -->
<div class="form-group">
    <input type="submit" class="form-control" value="Send">
</div><!-- .form-group end -->

CSS

body {
  background: #fff;
}

/* Contact Form */
#contact-form {
  width: 400px;
  margin: 30px auto;

  input.error,
  textarea.error {
    border-color: #f33;
  }

  label.error {
    font-size: 12px;
    margin-top: 5px;
  }
}


form {
  position: relative;
}

form .form-group {
  position: relative;
  margin-bottom: 15px;

  &:last-child {
    overflow: hidden;
    margin-bottom: 0;
  }
}

input,
input.form-control,
button,
button.form-control,
textarea,
textarea.form-control,
select,
select.form-control {
  width: 100%;
  font-size: 12px;
  height: 45px;
  line-height: 45px;
  border-radius: 2px;
  color: #222;
  outline: none;
  padding: 0 15px;
  transition: all 0.2s;
  box-shadow: none;
  border: 1px solid #ebeef0;
  background: #fafbfc;
}

input:focus,
textarea:focus,
input.form-control:focus,
textarea.form-control:focus,
select:focus,
select.form-control:focus {
  box-shadow: none;
  border-color: #d6d9da;
}

textarea,
textarea.form-control {
  height: 200px;
  line-height: 26px !important;
  padding-top: 11px;
  padding-bottom: 11px;
  height: 200px;
  resize: vertical;
}

form .field-icon {
  position: absolute;
  background: #eee;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  color: #222;
  border-radius: 100%;
  font-size: 13px;
  top: 10px;
  left: 10px;
}

.field-icon + input[type="text"],
.field-icon + input[type="email"],
.field-icon + textarea {
  text-indent: 30px;
}

.form-inline .form-control {
  width: 100%;
}

abbr {
  cursor: help;
}

label {
  vertical-align: top;
  margin-bottom: 0;
  // display: inline;
  color: #222;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 12px;
}

label.error {
  color: #ff3333;
  display: block;
}

input[type="submit"],
input[type="submit"].form-control,
input[type="submit"],
input[type="submit"].form-control {
  cursor: pointer;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 12px;
  position: relative;
  border: none;
  color: #fff;
  background: #ffc527;
  box-shadow: none;
  transition: all 0.2s;
  width: auto;
  border-radius: 2px;
  border: none;
}

.form-inline .form-control[type="submit"] {
  width: auto;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"].form-control:hover,
input[type="submit"].form-control:focus {
  background: #222;
}

input[type="submit"]:focus,
input[type="submit"].form-control:focus {
  box-shadow: none;
}

Javascript

$( "#contact-form" ).validate({
    // rules
    rules: {
        cfName: {
            required: true,
            minlength: 3
        },
        cfEmail: {
            required: true,
            email: true
        },
        cfMessage: {
            required: true,
            minlength: 8,
            maxlength: 500
        }
    }
});

Answer 1

$("#contact-form").submit(function(event){
  event.preventDefault();
  // execute your code here
  var timeoutId = setTimeout(function(){
    $( "#contact-form" ).validate({
      // rules
      rules: {
        cfName: {
          required: true,
          minlength: 3
        },
        cfEmail: {
          required: true,
          email: true
        },
        cfMessage: {
          required: true,
          minlength: 8,
          maxlength: 500
        }
      }
    });
  }, 3000)
});

Answer 2

我敢肯定有人有更好/更整洁的方法来做到这一点，做某种疯狂的递归模式或其他什么..

但是，要完成您想要做的事情，请执行以下操作（我还更新了您的小提琴）。

将您的验证包装在一个函数中，并将单击处理程序绑定到提交按钮。 然后当用户点击“提交”时，它首先触发，然后执行您的验证 js。

$(function(){
  $( "#contact-form" ).on("click",function(){
    alert("do something");
//then run form, or call form on Callback of your other function
 checkForm();
 })
})
function checkForm(){
//your original code 
} 

https://jsfiddle.net/rrzddexr/4/