Warning pop-up message not showing up in sign-up

Question

I was writing a code that would simulate a "sign up" experience. It is required there to put the same info (name, last name, gender, etc...). However, the problem is that, the program doesn't seem to release a warning pop-up message when a text field has no input. Is there a missing part in the program?

function myFunction1() {
  var x = document.getElementById("firstName").value;
  if (x == "") {
    alert("Please fill out this field");
  } else {
    alert("Value accepted.");
  }
}

function myFunction2() {
  document.getElementById("firstName").style.width = "100px";
}

function myFunction3() {
  var x = document.getElementById("lastName").value;
  if (x == "") {
    alert("Please fill out this field");
  } else {
    alert("Value accepted.");
  }
}

function myFunction4() {
  document.getElementById("lastName").style.width = "100px";
}

function myFunction5() {
  var x = document.getElementById("male").value;
  if (x == "") {
    alert("Please fill out this field");
  } else {
    alert("Value accepted.");
  }
}

function myFunction6() {
  document.getElementById("male").style.width = "100px";
}

function myFunction7() {
  var x = document.getElementById("female").value;
  if (x == "") {
    alert("Please fill out this field");
  } else {
    alert("Value accepted.");
  }
}

function myFunction8() {
  document.getElementById("female").style.width = "100px";
}

function myFunction9() {
  var x = document.getElementById("prefernotsay").value;
  if (x == "") {
    alert("Please fill out this field");
  } else {
    alert("Value accepted.");
  }
}

function myFunction10() {
  document.getElementById("prefernotsay").style.width = "100px";
}

function myFunction11() {
  var x = document.getElementById("email").value;
  if (x == "") {
    alert("Please fill out this field");
  } else {
    alert("Value accepted.");
  }
}

function myFunction12() {
  document.getElementById("email").style.width = "100px";
}

function myFunction13() {
  var x = document.getElementById("contactNumber").value;
  if (x == "") {
    alert("Please fill out this field");
  } else {
    alert("Value accepted.");
  }
}

function myFunction14() {
  document.getElementById("contactNumber").style.width = "100px";
}

<nav>

  <form id="signup">
    <fieldset form="signup">
      <legend>Sign up: </legend>

      <label for="firstName">First Name:</label>
      <input type="text" id="firstName" name="firstName" onblur="myFunction1()" onfocus="myFunction2()"><br><br>
      <label for="lastName">Last Name:</label>
      <input type="text" id="lastName" name="lastName" onblur="myFunction3()" onfocus="myFunction4()"><br><br>

      <p>Gender:</p>
      <input type="radio" id="male" name="gender" value="Male" onblur="myFunction5()" onfocus="myFunction6()">
      <label for="male">Male</label></br>
      <input type="radio" id="female" name="gender" value="Female" onblur="myFunction7()" onfocus="myFunction8()">
      <label for="female">Female</label></br>
      <input type="radio" id="prefernotsay" name="gender" value="Prefer not say" onblur="myFunction9()" onfocus="myFunction10()">
      <label for="prefernotsay">Prefer Not Say</label>

      <br>
      <br>

      <label for="email">Email:</label>
      <input type="text" id="email" name="email" onblur="myFunction11()" onfocus="myFunction12()"><br><br>

      <label for="contactNumber">Contact Number:</label>
      <input type="text" id="contactNumber" name="contactNumber" onblur="myFunction13()" onfocus="myFunction14()"><br><br>

      <input type="submit" value="Submit">
      <input type="reset" value="Clear">

    </fieldset>
  </form>


</nav>

Answer 1

alert("Hello! I am an alert box!!");