How can I correctly link my javascript to my html form?

Question

My javascript isn't running when I click submit on my form page.

<form onsubmit="validateReg()">

    <p>
     //email registration
    <input type="text" id="e-mail" placeholder="Email" />
  </p><p>
    //password registration
    <input type="text" id="pswd" placeholder="Password" />
  </p>
    <br>
    <input type="submit" class="submit">
  </for

I've tried multiple times linking the Javascript to the Html form and on the page when I click submit it doesn't return any of my error alerts.

//HTML
<form onsubmit="validateReg()">

    <p>
    <input type="text" id="e-mail" placeholder="Email" />
  </p><p>
    <input type="text" id="pswd" placeholder="Password" />
  </p>
    <br>
    <input type="submit" class="submit">
  </form>

//Javascript 
//Main Function
  function validateReg(){
  var email = document.getElementById('e-mail').value;
  var password = document.getElementById('pswd').value;

  var emailRGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  var emailResult = emailRGEX.test(email);
//validate Email
if(emailResult == false){
  alert("Please enter a valid email address");
  return false;
}
//validate lower case
  var lowerCaseLetters = /[a-z]/g;
if(password.value.match(lowerCaseLetters)) {
    return true;
  }else{
    alert("Password needs a lower case!");
    return false;
  }
  //validate upper case
  var upperCaseLetters = /[A-Z]/g;
if(password.value.match(upperCaseLetters)){
    return true;
  }else{
    alert("Password needs an upper case!");
    return false;
  }
  //validate numbers
  var numbers = /[0-9]/g;
if(password.value.match(numbers)){
  return true;
}else{
  alert("Password needs a number!");
  return false;
}
//validate special characters
  var special = /[!@#$%^&*(),.?":{}|<>]/g;
if(password.value.match(special)){
  return true;
}else{
  alert("Password needs a special character!");
  return false;
}
  if(password.value.length >=8){
    return true;
  }else{ alert("Password needs to be at least 8 characters");
   return false;
 }
}

I expect the code to output errors when a password is incorrectly submitted and when a password and email is correctly submitted so out put thank you.

Answer 1

A better way to do this is to add an event listener to your js file and listen for the 'submit' event. Followed by your function.

Furthermore ensure that your js file is added to your script tag in your HTML file. That should work if your logic is correct.

Answer 2

As Oluwafemi put it you could put an event listener on your 'submit' event instead. I would put the event on the submit button though. That way you can stop it on the click event without having to fire the submit of the form. If you update your code it could help with troubleshooting in the future.

It wouldn't take much to modify your code either.

First, you would need to update your form to look like this:

<form id="form">
    <p>
    <input type="text" id="e-mail" placeholder="Email" />
  </p>
  <p>
    <input type="text" id="pswd" placeholder="Password" />
  </p>
  <br />
    <input id="submitButton" type="submit" class="submit">
  </form>

Then add this below your javascript function like so:

document.querySelector("#submitButton").addEventListener("click", function(event) {
         event.preventDefault;

         validateReg()
}, false);

What this is doing is stopping the submit of the form and doing the check as expected. You can read more on this on the Mozilla developer site .

You will need to add document.getElementById('form').submit(); to any return statement that was set to true .

I did however, update the code to have the submit become the default functionality and the checks just return false if they fail like this:

//Javascript 
//Main Function
function validateReg() {

  var email = document.getElementById('e-mail').value;
  var password = document.getElementById('pswd').value;

  var emailRGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  var emailResult = emailRGEX.test(email);

  //validate Email
  if(emailResult == false){
    alert("Please enter a valid email address");
    return false;
  }

  //validate lower case
  var lowerCaseLetters = /[a-z]/g;
  if(password.match(lowerCaseLetters) == null) {
    alert("Password needs a lower case!");
    return false;
  }

  //validate upper case
  var upperCaseLetters = /[A-Z]/g;
  if(password.match(upperCaseLetters) == null){
    alert("Password needs an upper case!");
    return false;
  }

  //validate numbers
  var numbers = /[0-9]/g;
  if(password.match(numbers) == null){
    alert("Password needs a number!");
    return false;
  }

  //validate special characters
  var special = /[!@#$%^&*(),.?":{}|<>]/g;
  if(password.match(special) == null){
    alert("Password needs a special character!");
    return false;
  }

  if(password.length < 8){
    return false;
  }

  document.getElementById('form').submit();
}