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

Question

I'm using jQuery Validation Plugin to make validation for forms.

Here is a demo for the current state: https://jsfiddle.net/rrzddexr/1/

I want the validation notification appear after a time i can specify be hand (for example 3000ms), not as the provided demo where the validation messages appear immediately after i click submit

I want this purpose specially because i want to apply some js code within this delay, then the form apply its validation and show its results.

I'm something not professional at javascript. I hope i described the point clearly.

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

i'm sure there is someone out there with a nicer/neater way to do this, doing some sort of crazy recursive patterns or something..

However to accomplish what you want to do is the following (I also updated your fiddle).

Wrap your validate in a function, and bind a click handler to the submit button. Then when the user hits "submit" it fires that first, then executes your validate 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/