JSFiddle - React, Tailwind, and code Playground

HTML

<form id="survey" name="survey" action="SlideShow.html" method="post">
    First Name:<br>
    <input type="text" id="fname" name="fname" required="required"><br>
    Last Name:<br>
    <input type="text" id="lname" name="lname" required="required"><br>
    Email:<br>
    <input type="email" id="mail" name="mail" required="required"><br>
    Phone Number:<br>
    <input type="text" id="phone" name="phone" required="required"><br><br>             
    <input type="button" value="Submit" onclick="func()">
</form>

JavaScript

function func() {
  var first = document.getElementById('fname').value;
  var last = document.getElementById('lname').value;
  var email = document.getElementById('mail').value;
  var phone = document.getElementById('phone').value;
  var val_phone = /^\(\d{3}\)\d{3}-\d{4}$/;
  var val_mail = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;

  if (first === '' || last === '' || email === '' || phone === '') {
    alert("Do not Leave Any Blank Answers");
    return;
  }

  if (!phone.match(val_phone) || !email.match(val_mail)) {
    alert("Incorrect Format! \n Please Check Email and Phone Number!");
    return;
  }
  else {
    document.forms["survey"].submit();
  }
}