jquery form validation with ajax form submit

i am trying to submit the contact form with jquery validation plugin using ajax form submission.

i created both function with help of jquery and ajax, everything is working fine but i want to run both function in the same time.

please check my code.

$('#contactform').validate({
  rules:{
    fname:"required",
    email:{
      required:true,
      email:true
    },
    phone:"required",
    subject:"required",
    message:"required"
  },messages:{
    fname:"Please Enter Your Name.",
    email:{
      required:"Please Enter Your Email.",
      email:"Please enter a valid email address."
    },
    phone:"Please enter a valid phone number.",
    subject:"Please type Your Subject.",
    message:"Please type Your Message."
  },

  submitHandler:function(form) {
    form.submit();
  }
  
})

// AJAX REQUEST FOR INSERT DATA
$("#contactform").submit(function (e) {
  // PREVENT FROM RELOAD PAGE ON SUBMIT
  e.preventDefault();

  // CONSOLE FOR DEBUG CODE
  // console.log("Submit Button Clicked");

  // VARIABLE STORE IN AJAX FOR GET DATA CONTACT FORM
  let fname = $("#fname").val()
  let email = $("#email").val()
  let phone = $("#phone").val()
  let subject = $("#subject").val()
  let message = $("#message").val()

  let gresponse = grecaptcha.getResponse();

  // CONSOLE FOR DEBUG CODE VARIABLE
  // console.log(fname);
  // console.log(email);
  // console.log(phone);
  // console.log(subject);
  // console.log(message);

  if(gresponse.length == 0){

    $('#error').show().html();
    $('#error').delay(5000).fadeOut();
    return false
  } else {

  // OBJECT JAVASCRIPT
  contactdata = {name: fname, email: email, phone: phone, subject: subject, message: message,}

  // CONSOLE FOR DEBUG CONTACTDATA OBJECT
  // console.log(contactdata);

  $.ajax({
    type: "POST",
    url: "cform-process.php",
    data: JSON.stringify(contactdata),
    success: function (response) {

      // CONSOLE FOR DEBUG RESPONSE FROM PHP MYSQL
      // console.log(response);

      cformsucess = "<div class='alert alert-success text-center mt-4'>" + response + "</div>";

      $('#cformsucess').show().html();
      $("#cformsucess").html(cformsucess);
      $('#cformsucess').delay(5000).fadeOut();


      // $("#cformsucess").html(cformsucess);

      // setTimeout(function(){
      //   $('#cformsucess').fadeOut("slow");
      // },5000)

      // FORM RESET CODE FOR EMPTY ALL FIELD AFTER SUBMIT
      $("#contactform")[0].reset();
    }

  });

  }

})

Please let me know how to fix this. only form validation working ajax submission not working.

source https://stackoverflow.com/questions/72650167/jquery-form-validation-with-ajax-form-submit