Javascript empty validation not working before sending to database

Question

For some reason my JavaScript validation function is not working before sending the info to the database, I tried my best to fix it but it just wont work here is my code:

<form name="myForm" action="connectform.php" onsubmit="return validateForm()" method="POST" required>
  <div class="contact-form">
    <h1>Contact Me</h1>
    <div class="txtb">
      <label for="firstName">First Name :</label>
      <input type="text" name="firstName" id="firstName" placeholder="Enter Your First Name">
    </div>

    <div class="txtb">
      <label for="lastName">Last Name :</label>
      <input type="text" name="lastName"  placeholder="Enter Your Last Name">
    </div>

    <div class="txtb">
      <label for="email">Email</label>
      <input type="email" name="email" id="email" placeholder="Enter Your Email">
    </div>

    <div class="txtb">
      <label for="info">Message :</label>
      <input type="text" name="info" id="info">
    </div>
    <input type="submit" id='validate' class="btn" />
  </div>
</form>

and here is my javascript code (i only did it once for testing it for the first name):

<script>
  function validateForm() {
    var x = document.forms["myForm"]["firstName"].value;
    if (x==null || x=="") {
      alert("First name must be filled out");
      return false;
    }
</script>

Here is my PHP code:

<?php
  $firstName = $_POST['firstName'];
  $lastName = $_POST['lastName'];
  $email = $_POST['email'];
  $info = $_POST['info'];

  //Database Connection
  $conn = new mysqli('localhost', 'root', '', 'webpage_project');

  if ($conn->connect_error) {
      echo "$conn->connect_error";
  die("Connection Failed : ". $conn->connect_error);
  }
  else{
      $stmt = $conn->prepare("insert into contactme(firstName, lastName, email, info) values (?, ?, ?, ?)");
      $stmt->bind_param("ssss", $firstName, $lastName, $email, $info);
  $execval = $stmt->execute();
      $echo'Sent Sucessfully';
  $stmt->close();
  $conn->close();
  }
?>

Answer 1

Try changing your condition of if to this if(!x) , your if condition is not catering checks for undefined values, hence it wont pass the if condition if the value of x is undefined.

Answer 2

Your script is missing a curly bracket } , this should fix it:

<script>
  function validateForm() {
    var x = document.forms["myForm"]["firstName"].value;
    if (x==null || x=="") {
      alert("First name must be filled out");
      return false;
    }
  }
</script>

Answer 3

Use this code instead of your's one,

<form
  name="myForm"
  action="connectform.php"
  onsubmit="validateForm()"
  method="POST"
  required
>
  <div class="contact-form">
    <h1>Contact Me</h1>
    <div class="txtb">
      <label for="firstName">First Name :</label>
      <input
        type="text"
        name="firstName"
        id="firstName"
        placeholder="Enter Your First Name"
      />
    </div>
    <input type="submit" id="validate" class="btn" />
  </div>
</form>

and change your validateForm() function as,

validateForm() {
  const fname = document.forms["myForm"]["firstName"].value;
  if (fname) { /* this will cheak both conditions */
    alert("First name must be filled out");
    return false;
  }
},