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...

return regValidate(e) there's no variable e, it should be event. — Barmar
– Barmar, Commented Oct 3, 2019 at 21:09
And the regValidate() function is missing the e parameter. — Barmar
– Barmar, Commented Oct 3, 2019 at 21:09
The function doesn't have return false; when the username validation fails. — Barmar
– Barmar, Commented Oct 3, 2019 at 21:10
I put the event in there after following a different stackoverflow tutorial, i removed both it and it still doesnt work — PandaPlaysAll
– PandaPlaysAll, Commented Oct 3, 2019 at 21:11
Oooh thats a good point for the username field, however, i was testing with an email length less than 6 and it was still not working — PandaPlaysAll
– PandaPlaysAll, Commented Oct 3, 2019 at 21:12

Barmar · Accepted Answer · 2019-10-03 21:17:04Z

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>

Seva Kalashnikov · Accepted Answer · 2019-10-03 21:13:15Z

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>

Mister Jojo · Accepted Answer · 2019-10-03 22:11:23Z

maybe you should have a look on this code:

const MyForm   = document.querySelector('form[name=register]')
    , ErrorMsg = document.querySelector('#errMsg')

ErrorMsg.style.padding = "10px";  // better to do this with some CSS
const emailRE = "@";              // see regex for futur ?

MyForm.onsubmit=e=>  // regValidate()
{
  e.preventDefault()  // just for testing here 

  if (!MyForm.email.value.match(emailRE) || MyForm.email.value.length < 6)
  {
    ErrorMsg.textContent = "Please enter a valid email";
    return false;
  }
  if (MyForm.username.value.length < 5) {
    ErrorMsg.textContent = "Please enter a valid username";
    return false;
  }

  console.log('form is OK')
}
MyForm.onreset=_=>
{
  MyForm.email.style.width    = '110px'
  MyForm.username.style.width = '140px'
  ErrorMsg.innerHTML          = '&nbsp;'
}

MyForm.email.addEventListener('input', function() {
  this.style.width = `${(this.value.length +1) *8}px`
})
MyForm.username.addEventListener('input', function() {
  this.style.width = `${(this.value.length +1) *8}px`
})

<form name="register" action="XXX" method="post" >
  <p>
    <h1 class="form--title">Register</h1>
  </p>
  <div id="errMsg">&nbsp;</div>
  <p>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="Enter your email" style="width:110px" value="" >
  </p>
  <p>
    <label for="username">User ID</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" style="width:140px" value="" >
  </p>
  <p>
    <button type="submit">submit</button><br>
    <button type="reset">reset</button>
  </p>
</form>

FIRAT OLTULU · Accepted Answer · 2019-10-03 21:36:53Z

0

i changes a few lines your codes, you can't use e.preventDefault() in onsubmit event, because you used "return reg Validate()". its waited bool variable from regValidate()

 <!DOCTYPE html>
<html>
<body>

<p>When you submit the form, a function is triggered which alerts some text.</p>

<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>

<script>
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";
    return false;
  }

  return true;
}
</script>

</body>
</html>

edited Oct 3, 2019 at 21:36

answered Oct 3, 2019 at 21:17

FIRAT OLTULU

13 bronze badges

4 Comments

Barmar Over a year ago

Where is the validation?

FIRAT OLTULU Over a year ago

Sorry i forget that, i added my post

Barmar Over a year ago

You should explain what was wrong with the original code, and how your answer fixes it. But your code is completely different, it's hard to see how it really applies.

FIRAT OLTULU Over a year ago

hmm, okay i changed my post

Collectives™ on Stack Overflow

HTML Form and JavaScript validation isnt working

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related