HTML Form and JavaScript validation isnt working

Question

JavaScript validation not occurring correctly. Form submits anyway without checking the issue

I've tried changing from getElementByID.value; and document.form[][].value;

Tried changing my javascript to do it on my function init(); but also in HTML obsubmit attribute.

Really confused on what im doing wrong

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("Username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.forms["register"]["email"].value;
  if (email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
    return false;
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
  }
}

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>

There is no error message it just goes straight to the form page which displays what was submitted for what name attribute...

Answer 1

You don't need e.preventDefault(), you just need to use return false in all the validation failures.

getElementById("Username") should be getElementById("username"), since IDs are case-sensitive.

Your email regexp test is backwards, you want to report an error if it doesn't match.

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.getElementById("email").value;
  if (!email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
    return false;
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
    return false;
  }
}

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>
</form>

Answer 2

Here's the working code:

function regValidate() {
  var errMsg = document.getElementById("errMsg");
  var username = document.getElementById("username").value;
  errMsg.style.padding = "10px";
  var emailRE = "@";
  var email = document.forms["register"]["email"].value;
  if (email.match(emailRE) || email.length < 6) {
    errMsg.innerHTML = "Please enter a valid email";
  } else if (username.length < 5) {
    errMsg.innerHTML = "Please enter a valid username";
  }

  return false;
}

I removed function argument and added return false so form submit action doesn't happen. Also fixed uppercase Username to username to match your html

Only thing changed in html is onsubmit function call to have no arguments as it was removed from javascript:

<form name="register" action="(this is a realwebsite, removing due to privacy + legal reasons)" onsubmit="return regValidate()" method="post">
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg"></div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" />
  </p>
  <p>
    <input type="submit" value="submit" /><br>
    <input type="reset" value="reset" />
  </p>
  </form>