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

Question

我正在使用jQuery Validation Plugin来验证表单。

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

我希望验证通知出现在我可以指定为手的时间（例如3000ms）之后，而不是在我点击提交后立即出现验证消息的提供的演示

我特别想要这个目的，因为我想在这个延迟中应用一些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

我确定那里有人有更好/更好的方式来做这件事，做某种疯狂的递归模式或其他东西..

然而要完成你想要做的是以下（我也更新了你的小提琴）。

将验证包装在函数中，并将单击处理程序绑定到提交按钮。然后，当用户点击＆＃34;提交＆＃34;它首先触发，然后执行你的验证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/