I am working on a project website with a registration form in which I want to check if the password is ok, if the email is ok, and etc. I get no output at all (No alerts) and the page just refreshes itself, when checking the console I see an error that's described at the end.

That's the function:

function validationCheck() {
  var name = document.forms["register"]["fName"];
  var email = document.forms["register"]["email"];
  var phone = document.forms["register"]["phonenumber"];
  var password = document.forms["register"]["password"];

  if (name.value == "") {
    window.alert("Please enter your name.");
    name.focus();
    return false;
  }
  if (email.value == "") {
    window.alert(
      "Please enter a valid e-mail address.");
    email.focus();
    return false;
  }
  if (phone.value == "") {
    window.alert(
      "Please enter your telephone number.");
    phone.focus();
    return false;
  }
  if (password.value == "") {
    window.alert("Please enter your password");
    password.focus();
    return false;
  }

  return true;
}

<form id="register" runat="server" method="post" onsubmit="return validationCheck();">
  <h2 >Login Form</h2>
  <div ><i ></i></div>
  <div ><input  type="text" name="username" placeholder="Username" runat="server" id="username" /></div>
  <!-- Username #11 -->
  <div ><input  type="text" name="email" placeholder="Email" runat="server" id="email"></div>
  <!-- Email #1 -->
  <div ><input  type="text" name="password" placeholder="Password" runat="server" id="password"></div>
  <!-- Password #2 -->
  <div ><input  type="text" name="fName" placeholder="First Name" runat="server" id="fName" /></div>
  <!-- First Name #8 -->
  <div ><input  type="text" name="lName" placeholder="Last Name" runat="server" id="lName" /></div>
  <!-- Last Name #9 -->
  <div ><input  type="date" name="birthdate" runat="server" id="birthdate" placeholder="Birthdate" /></div>
  <!-- Birthdate #3 -->
  <div ><input  title="Phone Number" name="phonenumber" placeholder="Phone Number" runat="server" id="phonenumber" /></div>
  <!-- Phone Number #4 -->
  <span></span>
  <div >
    <select id="gender" name="gender" runat="server"  style="color:#6c757d">
      <option value="Gender" disabled="disabled" selected="selected">Gender</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option value="Other">Other</option>
    </select>
  </div>
  <div >
    <select id="camera" name="camera-brand" runat="server"  style="color:#6c757d">
      <option value="Camera Brand" disabled="disabled" selected="selected">Camera Brand</option>
      <option value="Nikon">Nikon</option>
      <option value="Canon">Canon</option>
      <option value="Fuji">Fuji</option>
      <option value="Sony">Sony</option>
      <option value="Other">Other</option>
    </select>
  </div>
  <div ><input  type="text" name="lens" placeholder="Lens" runat="server" id="lens" /></div>
  <!-- Lens #10 -->
  <div >
    <select id="genre" name="genre" runat="server"  style="color:#6c757d">
      <option value="Sport">Sports</option>
      <option value="Wildlife">Wildlife</option>
      <option value="Landscape">Landscape</option>
      <option value="Portrait">Portrait</option>
      <option value="Architecture">Architecture</option>
    </select>
  </div>
  <div ><button  type="submit" runat="server" id="submit">Sign up</button></div>
</form>

The error I am receiving:

Uncaught TypeError: Cannot read properties of undefined (reading 'value')

CodePudding user response：

From what I have managed to reproduce this worked:

<script>
document.getElementById('register').addEventListener('submit', validationCheck);
    function validationCheck(ev) {
     ev.preventDefault();
     const form = new FormData(ev.target);
     const name = form.get('fName'); //the name of the property from the form.
    
     if(name == '') {
     return window.alert(text);
    }
    
    ev.target.submit();
    }
</script>

The use of event.preventDefault() is to prevent the default action of submiting the form and the refreshing of the page, allowing you to do your validation.

CodePudding user response：

Alright after hours and hours of testing I finally understood what was the problem. I've had a site built using ASP.NET, meaning that instead of head and body tags I've asp::... tags.

So after I've got rid of them and changed them to and everything worked as it should after I've put this script into the body and not into the head as required in the ASP.NET format.

The code is in fact working.