HTML code with CSS and javascript stopped validating form-CodePudding

I am elaborating simple HTML form with some CSS included in HTML code and with javascript validation also included in HTML. I cannot identify any error but the input data in the form will not validate for some reason... Any ideas what the problem with the code could be? I tried different browsers (Chrome, Edge) but no success yet. Many thanks in advance.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>

  <script>
    function checkField1() {

      var field = document.getElementById("Name").value;
      var regex = /^[a-zA-Z\s]*$/; //Only letters allowed

      if (regex.test(field))
        document.getElementById("message1").innerHTML = "Input accepted!";
      else document.getElementById("message1").innerHTML = "Please enter your name!";
    }

    function checkField2() {

      var field = document.getElementById("Address").value;
      var regex = /^[0-9a-zA-Z\s]*$/; //Only alphanumerical characters allowed 

      if (regex.test(field))
        document.getElementById("message2").innerHTML = "Input accepted!";
      else document.getElementById("message2").innerHTML = "Please enter your address!";
    }

    function checkField3() {

      var field = document.getElementById("Email").value;
      var regex = /^[a-zA-Z0-9.!#$%&'* /=?^_`{|}~-] @[a-zA-Z0-9-] (?:\.[a-zA-Z0-9-] )*$/; //Only correct email format allowed

      if (regex.test(field))
        document.getElementById("message3").innerHTML = "Input accepted!";
      else document.getElementById("message3").innerHTML = "Please enter valid email address!";
    }

    function checkField4() {

      var field = document.getElementById("Password").value;
      var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed

      if (regex.test(field))
        document.getElementById("message4").innerHTML = "Input accepted!";
      else document.getElementById("message4").innerHTML = "Please enter 8 character password!";
    }

    function checkField5() {

      var field = document.getElementById("RepeatPassword").value;
      var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed

      if (regex.test(field))
        document.getElementById("message5").innerHTML = "Input accepted!";
      else document.getElementById("message5").innerHTML = "Please enter 8 character password!";
    }

    function checkField6() {

      var field = document.getElementById("Telephone").value;
      var regex = /^[0-9]{10}$/; //Only 10 character phone number allowed

      if (regex.test(field))
        document.getElementById("message6").innerHTML = "Input accepted!";
      else document.getElementById("message6").innerHTML = "Please enter your mobile phone!";
    }

    function checkPassword() {

      var pw1 = document.getElementById("Password");
      var pw2 = document.getElementById("RepeatPassword"); //Password confirmation check

      if (pw1 != pw2)
        document.getElementById("messagePWD").innerHTML = "Passwords did not match";
    else document.getElementById("messagePWD").innerHTML = "Password created successfully";
    }
  </script>


  <style>
    /* This are inline styles applicable to registration form */
    
    body {
      background-color: antiquewhite;
    }
    
    div {
      box-sizing: border-box;
      width: 100%;
      border: 100px solid black;
      float: left;
      align-content: center;
      align-items: center;
    }
    
    form {
      margin: 0 auto;
      width: 600px;
    }
  </style>
</head>

<body>
  <! If you click the "Submit" button, the form-data will be sent to a page called "/submit.php" >
  <h1 style="text-align: center;">REGISTRATION FORM</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Harvard_University_logo.svg/2560px-Harvard_University_logo.svg.png" alt="Harward University Logo" width="500" height="100" margin:auto>
  <p style="text-align: center; ">Do you want to register for a new course? You can use this registration form to sign up for new study program. We will contact you as soon as possible with further information.</p>
  <br />
  <form name="RegForm" action="/submit.php" method="post">
    <p>Name: <input type="text" size="65" name="Name" id="Name" required onblur="checkField1();"><br>
      <span id="message1"></span></p>
    <br />
    <p>Address: <input type="text" size="65" name="Address" id="Address" required onblur="checkField2();"><br>
      <span id="message2"></span></p>
    <br />
    <p>E-mail Address: <input type="text" size="65" name="EMail" id="Email" required onblur="checkField3();"><br>
      <span id="message3"></span></p>
    <br />
    <p>Password: <input type="password" size="65" name="Password" id="Password" required onblur="checkField4();"><br>
      <span id="message4"></span></p>
    <br />
    <p>Repeat Password: <input type="password" size="65" name="RepeatPassword" id="RepeatPassword" required onfocus="checkField5();" onblur="checkPassword();"><br>
      <span id="message5"></span><br>
      <span id="messagePWD"></span>
    </p>
    <br />
    <p>Telephone: <input type="text" size="65" name="Telephone" id="Telephone" placeholder="090x xxx xxx" required onblur="checkField6();"><br>
      <span id="message6"></span></p>
    <br />

    <p>
      SELECT YOUR COURSE
      <select type="text" value="" name="Subject">
        <option>MBA</option>
        <option>LLM</option>
        <option>BA</option>
        <option>MSc</option>
        <option>PhD</option>
      </select>
    </p>
    <br />
    <br />
    <p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
    <p>
      <input type="submit" value="Submit" name="Submit" />
      <input type="reset" value="Reset" name="Reset" />
    </p>

    <br>
    <p>If you click the "Submit" button, the form-data will be sent to a page called "/submit.php".</p>
    </br>
  </form>

</body>

</html>

CodePudding user response：

inspect your js script that you've missed the opening and closing brackets of if conditions and opening bracket of else condition in each function. I think your error will be resolved : )

Feel free to take a look at this simple HTML form validation in js.

function validateForm() {
  let nameField = document.forms["RegForm"]["name"].value;
  const nameRegex = /^[a-zA-Z\s] $/; //Only characters allowed

  if (nameField == "" || nameField == null) {
    alert("Name must be filled out!");
    return false;
  } else if (!nameRegex.test(nameField)) {
    alert("Only characters from a-Z");
    return false;
  } else {
    alert("Name accepted :)");
    return false;
    //return true; //whenever you want to submit the form
  }
}

<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Validation</h2>
  
  <form name="RegForm" action="/submit.php" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="name">
    <input type="submit" value="Submit">
  </form>

</body>
</html>

CodePudding user response：

function checkField1() {
  var field = document.getElementById("Name").value;
  var regex = /^[a-zA-Z\s] $/; //Only letters allowed
  if (field == "" || field == null) {
    document.getElementById("message1").innerHTML = "Please enter your name!";
  } else if (!regex.test(field)) {
    document.getElementById("message1").innerHTML = "Only characters from a-Z";
  } else {
    document.getElementById("message1").innerHTML = "Input accepted!";
  }
}

function checkField2() {
  var field = document.getElementById("Address").value;
  var regex = /^[0-9a-zA-Z\s] $/; //Only alphanumerical characters allowed
  if (field == "" || field == null) {
    document.getElementById("message2").innerHTML = "Please enter your address!";
  } else if (!regex.test(field)) {
    document.getElementById("message2").innerHTML = "Only characters and numbers are allowed!";
  } else {
    document.getElementById("message2").innerHTML = "Input accepted!";
  }
}

function checkField3() {
  var field = document.getElementById("Email").value;
  var regex = /^[a-zA-Z0-9.!#$%&'* /=?^_`{|}~-] @[a-zA-Z0-9-] (?:\.[a-zA-Z0-9-] )*$/; //Only correct email format allowed
  if (field == "" || field == null) {
    document.getElementById("message3").innerHTML = "Please enter an email address!";
  } else if (!regex.test(field)) {
    document.getElementById("message3").innerHTML = "Please enter a valid email address!";
  } else {
    document.getElementById("message3").innerHTML = "Input accepted!";
  }
}

function checkField4() {
  var field = document.getElementById("Password").value;
  var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed
  if (field == "" || field == null) {
    document.getElementById("message4").innerHTML = "Please choose a password!";
  } else if (!regex.test(field)) {
    document.getElementById("message4").innerHTML = "Please enter 8 character password!";
  } else {
    document.getElementById("message4").innerHTML = "Password accepted!";
  }
}

function checkField5() {
  var field = document.getElementById("RepeatPassword").value;
  var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed
  if (field == "" || field == null) {
    document.getElementById("message5").innerHTML = "Please repeat your password!";
  } else if (!regex.test(field)) {
    document.getElementById("message5").innerHTML = "Please enter 8 character password!";
  } else {
    document.getElementById("message5").innerHTML = "Password accepted!";
  }
}

function checkField6() {
  var field = document.getElementById("Telephone").value;
  var regex = /^[0-9]{10}$/; //Only 10 character phone number allowed
  if (field == "" || field == null) {
    document.getElementById("message6").innerHTML = "Please enter your mobile phone!";
  } else if (!regex.test(field)) {
    document.getElementById("message6").innerHTML = "Only 10 characters phone number allowed";
  } else {
    document.getElementById("message6").innerHTML = "Input accepted!";
  }
}

function checkPassword() {
  var pw1 = document.getElementById("Password");
  var pw2 = document.getElementById("RepeatPassword"); //Password confirmation check
  if (pw1 != pw2)
    document.getElementById("messagePWD").innerHTML = "Passwords did not match";
  else document.getElementById("messagePWD").innerHTML = "Password created successfully";
}

/* This are inline styles applicable to registration form */

body {
  background-color: antiquewhite;
}

div {
  box-sizing: border-box;
  width: 100%;
  border: 100px solid black;
  float: left;
  align-content: center;
  align-items: center;
}

form {
  margin: 0 auto;
  width: 600px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <! If you click the "Submit" button, the form-data will be sent to a page called "/submit.php">
  <h1 style="text-align: center;">REGISTRATION FORM</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Harvard_University_logo.svg/2560px-Harvard_University_logo.svg.png" alt="Harward University Logo" width="500" height="100" margin:auto>
  <p style="text-align: center; ">Do you want to register for a new course? You can use this registration form to sign up for new study program. We will contact you as soon as possible with further information.</p>
  <br />
  <form name="RegForm" action="/submit.php" method="post">
    <p>Name: <input type="text" size="65" name="Name" id="Name" required onblur="checkField1();"><br>
      <span id="message1"></span>
    </p>
    <br />
    <p>Address: <input type="text" size="65" name="Address" id="Address" required onblur="checkField2();"><br>
      <span id="message2"></span>
    </p>
    <br />
    <p>E-mail Address: <input type="text" size="65" name="EMail" id="Email" required onblur="checkField3();"><br>
      <span id="message3"></span>
    </p>
    <br />
    <p>Password: <input type="password" size="65" name="Password" id="Password" required onblur="checkField4();"><br>
      <span id="message4"></span>
    </p>
    <br />
    <p>Repeat Password: <input type="password" size="65" name="RepeatPassword" id="RepeatPassword" required onfocus="checkField5();" onblur="checkPassword();"><br>
      <span id="message5"></span><br>
      <span id="messagePWD"></span>
    </p>
    <br />
    <p>Telephone: <input type="text" size="65" name="Telephone" id="Telephone" placeholder="090x xxx xxx" required onblur="checkField6();"><br>
      <span id="message6"></span>
    </p>
    <br />

    <p>
      SELECT YOUR COURSE
      <select type="text" value="" name="Subject">
        <option>MBA</option>
        <option>LLM</option>
        <option>BA</option>
        <option>MSc</option>
        <option>PhD</option>
      </select>
    </p>
    <br />
    <br />
    <p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
    <p>
      <input type="submit" value="Submit" name="Submit" />
      <input type="reset" value="Reset" name="Reset" />
    </p>

    <br />
    <p>If you click the "Submit" button, the form-data will be sent to a page called "/submit.php".</p>
    <br />
  </form>

</body>

</html>