Contact form validation with php using ajax and jQuery

Question

I am new to php and jQuery but I managed to create a contact form that I send to my email address using jQuery ajax and php.

I have a small problem. My contact form is only sent if the user fills in all the entries directly. If for example, he writes an invalid email, there is the validation (client side) that is displayed and if he writes a valid email, the contact form is not sent anymore.

I think it's because of my isValid variable. If I understand correctly, I have defined a ValidateInputs function with some validations. And when there is no error, IsValid is set to true. I guess when I send the data to php via ajax, I set the isValid to true but I am probably missing something

Hope I am clear

Any help?

My javascript code:

$(document).ready(function() {
  
  $('#contactForm').on('submit', function(event) {
    event.preventDefault();
    
    validateInputs()
    
    var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};
    
    that.find('[name]').each(function(value) {
      var that = $(this),
          name = that.attr('name'),
          value = that.val();

          data[name] = value;
    });

    if(isValid) {
      $.ajax({
        url: url,
        type: type,
        data: data,
        
      });
      console.log('send')
    } else{
      console.log('not sent')
    }

    return false;
  });
});

var isValid = true;

function validateInputs() {
  var nameValue = $('#name').val();
  var emailValue = $('#email').val();
  var subjectValue = $('#subject').val();
  var messageValue = $('#message').val();
  const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  if (nameValue == '' ) {
    $('#error').html('This field is required');
    isValid = false;
  } else if(nameValue.length < 3) {
    $('#error').html('Name needs to be at least 3 characters');
    isValid = false;
  }
  else {
    $('#error').html('');
    //$('.inputbox').css('border', 'solid 1px green');
  }

  if (emailValue == '' ) {
    $('#errorMail').html('This field is required');
    isValid = false;
  } else if (!$('#email').val().match(regex)) {
    $('#errorMail').html('Please enter a valid email address');
    isValid = false;
  }
  else {
    $('#errorMail').html('');
  }

  if (subjectValue == '' ) {
    $('#errorSubject').html('This field is required');
    isValid = false;
  }
  else {
    $('#errorSubject').html('');
  }

  if (messageValue == '' ) {
    $('#errorMessage').html('This field is required');
    isValid = false;
  } else if (messageValue.length < 20) {
    $('#errorMessage').html('Name needs to be at least 20 characters');
    isValid = false;
  }
  else {
    $('#errorMessage').html('');
  }

  return isValid
}

And this is my PHP code:

<?php

 if(isset($_POST['submit'])){
   
   $mailto = "[email protected]"; //Send the email to this address
   
   //All the inputs informations
   $mailfrom = $_POST['email'];
   $name = $_POST['name'];
   $subject = $_POST['subject'];
   $message = "NAME: " .$name. "\r\n\n". "Wrote the following Message:" ."\r\n". $_POST['message'];
   $message = $_POST['message'];
   $headers = "From: ". $mailfrom; 
   $sendMail = mail($mailto, $message, $headers); // Send mail to website owner
 }
 ?>