jQuery 仅使用提交按钮验证检查表单

Question

我有一个问题，我已经两天没有解决了。我有一个表格。我想在发送之前用 jQuery Validate 检查这个表单。但我真正想要的是它只在我点击提交按钮时检查。正如您在示例中看到的那样，每次我对输入进行更改时都会打开弹出窗口。我该怎么办？

https://jsfiddle.net/0g3cv7u2/1/

$("#intro_send_form").on('click', function(){
    $('#sendclip_form').validate({
        ignore: [],
        focusInvalid: false,
        rules: {
            mail: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            mail: {
                required: "Mail input cannot be the empty.",
            },
            password: {
                required: "Password input cannot be the empty.",
            },
        },
        showErrors: function(errorMap, errorList) {
            
            var summary = "Your form contains " + this.numberOfInvalids() + " errors, see details above.</br>";
            //$(".form-message").html("Your form contains " + this.numberOfInvalids() + " errors, see details above.");
            $('#copyMessage').addClass('alert-open');
            $.each(errorList, function() {
                summary += "<span class='error_entrys'>" + this.message + "</span>";
            });
            $("#copyMessage").html(summary);
            setTimeout(function(){
                $('#copyMessage').removeClass('alert-open');
            }, 3000);
        
        },
        submitHandler: function(form) {
            var $form = $(form);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            // ajax something
        }
    });
});

.error_entrys {
  display: block;
}
.alert {
  min-width: 150px;
  padding: 15px;
  margin-top:17px;
  border: 1px solid transparent;
  border-radius: 3px;
  text-align:left;
}
.alert-copy {
  display: block;
  position: fixed;
  background-color: #1e262c;
  color: #fff;
  border: 2px solid orange;
  min-height: 48px;
  min-width: 288px;
  max-width: 550px;
  padding: 16px 24px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 6px;
  margin: 12px;
  font-size: 14px;
  cursor: default;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.alert-copy2 {
  outline: none;
  position: fixed;
  box-sizing: border-box;
  top: 50px;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 100000;
}
.alert-open {
  transform: translateY(0px);
  opacity: 1;
  -webkit-transform: translateY(0px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>

<div id="copyMessage" class="alert-copy alert-copy2" role="alert"></div>
<form id="sendclip_form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input name="mail" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input name="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button id="intro_send_form" type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 1

您必须在显示错误后重置表单。

见下面的片段。

var err = 0;

$("#intro_send_form").on('click', function(e){
    
    var form = $('#sendclip_form').validate({
        ignore: [],
        focusInvalid: false,
        onkeyup: false,
        onclick: false,
        onfocusout: false,
        rules: {
            mail: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            mail: {
                required: "Mail input cannot be the empty.",
            },
            password: {
                required: "Password input cannot be the empty.",
            },
        },
        showErrors: function(errorMap, errorList) {
            err = this.numberOfInvalids();
            if(err != 0){
              var summary = "Your form contains " + this.numberOfInvalids() + " errors, see details above.</br>";
            //$(".form-message").html("Your form contains " + this.numberOfInvalids() + " errors, see details above.");
            $('#copyMessage').addClass('alert-open');
            $.each(errorList, function() {
                summary += "<span class='error_entrys'>" + this.message + "</span>";
            });
            $("#copyMessage").html(summary);
            setTimeout(function(){
                $('#copyMessage').removeClass('alert-open');
            }, 3000);
            
        
        }
        form.resetForm();
            },
            
        submitHandler: function(form) {
            var $form = $(form);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            // ajax something
        }
    });
    
});

.error_entrys {
              display: block;
            }
            .alert {
              min-width: 150px;
              padding: 15px;
              margin-top:17px;
              border: 1px solid transparent;
              border-radius: 3px;
              text-align:left;
            }
            .alert-copy {
              display: block;
              position: fixed;
              background-color: #1e262c;
              color: #fff;
              border: 2px solid orange;
              min-height: 48px;
              min-width: 288px;
              max-width: 550px;
              padding: 16px 24px;
              box-sizing: border-box;
              box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
              border-radius: 6px;
              margin: 12px;
              font-size: 14px;
              cursor: default;
              -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
              transition: transform 0.3s, opacity 0.3s;
              opacity: 0;
              -webkit-transform: translateY(-100px);
              transform: translateY(-100px);font-family: 'Roboto', 'Noto', sans-serif;
              -webkit-font-smoothing: antialiased;
            }
            .alert-copy2 {
              outline: none;
              position: fixed;
              box-sizing: border-box;
              top: 50px;
              margin: 0 auto;
              left: 0;
              right: 0;
              z-index: 100000;
            }
            .alert-open {
              transform: translateY(0px);
              opacity: 1;
              -webkit-transform: translateY(0px);
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>

<div id="copyMessage" class="alert-copy alert-copy2" role="alert"></div>
<form id="sendclip_form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input name="mail" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input name="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button id="intro_send_form" type="submit" class="btn btn-primary">Submit</button>
</form>