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  style="color:red;">This field is required</span>'); 
            }
            
            if (email.length < 1) {  
              $("#emailmsg").append('<span  style="color:red;">This field is required</span>');    
            }
            if (pwd.length < 1) {  
              $("#pwdmsg").append('<span  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 >
             <span id="msg"></span>
                <label for="username"><b>Username</b></label>
                <input type="text" placeholder="Username" name="username" id="first_name"  >
            </div>

            <div >
                <label for="email"><b>Email</b></label>
                <input type="text" placeholder="Enter Email" name="email" id="email" required>
            </div>

            <div >
                <label for="password"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="password" id="password" required>
            </div>

            <div >
                <button type="submit"  name="submit" id="signup">Sign Up</button>
                <button type="button" >Cancel</button>
            </div>
        </div>
</div>
</div>
    </form>

CodePudding user response：

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.

CodePudding user response：

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>