jQuery Validate Check Form with Submit Button Only

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65839424/jquery-validate-check-form-with-submit-button-only

Answer 1

You have to reset the form after showing errors.

See below snippit.

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>