HTML Form and JavaScript validation isnt working

user_8904301 0
Viewed 79

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

forms html javascript
4 Answers

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

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>

user_14918950

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>

user_106690100

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