How to submit form after validate all fields

Question

I am tyring to validate my form using jquery , form is validating fine but form is not submitted even after i entered all fields correctly,How can i do this ? Where i am wrong ? Here is my jquery code

 <script>  
    $(document).ready (function () {
        $('#first_form').submit (function (e) { 
                 
            e.preventDefault();  
             var first_name = $('#first_name').val(); 
             var email = $('#email').val();     
             var pwd = $('#pwd').val(); 
             
             var mobile = $('#mobile').val();
            
             var city = $('#city').val();
            var state = $('#state').val();
             var country = $('#country').val();
             
              $(".error").remove();  
            if (first_name.length < 1) {  
              $("#usernamemsg").append('<span class="error" style="color:red;">This field is required</span>'); 
            }
            
            if (email.length < 1) {  
              $("#emailmsg").append('<span class="error" style="color:red;">This field is required</span>');    
            }
            if (pwd.length < 1) {  
              $("#pwdmsg").append('<span class="error" style="color:red;">Password must be at least 6 characters long</span>'); 
            }
            $("#first_form").validate({ 
            submitHandler: function(form) {  
                           if ($(form).valid()) 
                               form.submit(); 
                           return false; // prevent normal form posting
                    }
 });
        
    });  
 });
</script>

Here is my form,how can i submit form after enter all fields ?

            <form action="" method="post" id="first_form">
            <div class="form-field col-md-6">
             <span id="msg"></span>
                <label for="username"><b>Username</b></label>
                <input type="text" placeholder="Username" name="username" id="first_name"  >
            </div>

            <div class="form-field col-md-6">
                <label for="email"><b>Email</b></label>
                <input type="text" placeholder="Enter Email" name="email" id="email" required>
            </div>

            <div class="form-field col-md-6">
                <label for="password"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="password" id="password" required>
            </div>

            <div class="clearfix btns-form-main">
                <button type="submit" class="signupbtn" name="submit" id="signup">Sign Up</button>
                <button type="button" class="cancelbtn">Cancel</button>
            </div>
        </div>
</div>
</div>
    </form>

Answer 1

You dont need the validate function inside the submit function, and since you are using jQuery Validate, you can specify rules and messages inside the validate function, try the below code:

$(document).ready(function () {
    $("#first_form").validate({
        errorPlacement: function errorPlacement(error, element) {
            element.after(error);
        },
        rules: {
            email: {
                required: true,
                email: true,
            },
            pwd: {
                required: true,
                minlength: 8,
                maxlength: 20,
            },
        },
        submitHandler: function (form) {
            if ($(form).valid())
                form.submit();
            return false; // prevent normal form posting
        }
    });
});

Update: Also add the required class to fields that you want to add validation on.

Answer 2

By addClass with :not() selector you can do that

$(document).on("submit" , '#first_form:not(.validated)' , function (e) {
  e.preventDefault();
  let $this = $(this);
  // do your validation here
  console.log("validating");
  console.log("After Validation Complete.. add the class and submit..");
  // If form is valid
  setTimeout(function(){ // for testing purposes << remove it
    $this.addClass("validated").submit();
  } , 2000); // <<< remove it
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="first_form">
  <input type="submit" value="Submit"/>
</form>