Html - I don't know why my JavaScript is not validating my form

XDW
April 22, 2024
77 views
0 votes
2 Answers

For the ‘onsubmit’ I have tried ‘onclick’, but it still does not work. Also my JavaScript should be fine, but if there are any errors in general, just let me know. One of my friends told me it has something to do with the type="submit" ,but I do not know a work around to this problem. I moved the ‘onsubmit’ to the top instead of where the submit button is when I changed it from ‘onclick’ to ‘onsubmit’.

function Signup() {
  vfname = document.forms["register_form"]['fname'].value;
  vlname = document.forms["register_form"]['lname'].value;
  vemail = document.forms["register_form"]['email'].value;
  vphone = document.forms["register_form"]['phone'].value;
  vpassw = document.forms["register_form"]['passw'].value;
  vpassc = document.forms["register_form"]['passc'].value;
}
if (Name(vfname, vlname)) {
  if (Email(vemail)) {
    if (Phone(vphone)) {
      if (Password(vpassw, vpassc)) {
        alert("Verify success");
        register_form.submit();
        return true;
      }
    }
  }
}

function Password(vpassw, vpassc) {
  var passwordmatch = /^[A-Za-z0-9s]+$/;
  if (vpassw.match(passwordmatch) = vpassc.match(passwordmatch)) {
    if (vpassw.match(passwordmatch) == null) {
      alert("Must enter a password");
      return false;
    } else {
      alert("Passwords match");
      return true;
    }
  } else {
    alert("Password error");
    return false;
  }
}

function Phone(vphone) {
  var phoneformat = /^[0-9]+$/;
  if (vphone.match(phoneformat) == null) {
    alert("Numbers only");
    return false;
  } else {
    if (vphone.length != 10) {
      alert("Phone number is not the required length");
    } else {
      return true;
    }
  }
}

function Email(vemail) {
  var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
  if (vemail.match(mailformat)) {
    return true;
  } else {
    alert("Email address does not follow the format");
    return false;
  }
}

function Name(vfname, vlname) {
  var nameformat = /^[a-zA-Z]+$/;
  if (vfname.match(nameformat) == null || vlname.match(nameformat) == null) {
    alert("First name and last name can only contain letters");
    return false;
  } else {
    return true;

  }

}

<script type="text/javascript" src="cue/js/veri.js"></script>

<form name="register_form" method="post" action="http://tlocalhost/ds/signup.php" onsubmit="return Signup();">
  <p class="info">First Name</p>
  <div class="form-group">
    <input id="fname" name="fname" placeholder="John" class="form-control" required>
  </div>
  <p class="info">Surname</p>
  <div class="form-group">
    <input id="lname" name="lname" placeholder="Smith" class="form-control" required>
  </div>
  <p class="info">Email</p>
  <div class="form-group">
    <input type="email" name="email" placeholder="[email protected]" class="form-control" required>
  </div>
  <p class="info">Phone Number</p>
  <div class="form-group">
    <input type="phone" name="phone" placeholder="0412456789" class="form-control" required>
  </div>
  <p class="info">Password</p>
  <div class="form-group">
    <input id="passw" name="passw" placeholder="$0aP2S" class="form-control" required>
  </div>
  <p class="info">Confirm Password</p>
  <div class="form-group">
    <input id="passc" name="passc" placeholder="$0aP2S" class="form-control" required>
  </div>
  <div class="form-btn">
    <input type="reset" class="btn-reset" value="RESET"></input>
    <input type="submit" value="SUBMIT" class="btn-submit"></input>
  </div>
  <div>
    <p class="link"><a href="http://localhost/ds/html-2column.php"> Got an account? Login here! </a></p>
  </div>
</form>

Tags: html javascript

Answers

Several errors

having a } in the wrong place. I simplified the test
=== is comparison, you have = in your match password
The password tests were not correct anyway, I simplified them
You need to NOT submit the form in the submit event, but I have used the recommended preventDefault instead of returning true or false
not using let or var for your variables will pollute the global scope
no need to use else after a return
Invalid HTML

I added some IDs and use the IDs instead of names. Form name is already deprecated.

I also made the functions consts and use recommended eventListeners

Lastly I changed the test to test NOT correct and stop submission instead of testing correct and allow it.

const isPassword = (vpassw, vpassc) => {
  var passwordmatch = /^[A-Za-z0-9s]+$/;
  if (!vpassw.match(passwordmatch) || !vpassc.match(passwordmatch)) {
    alert("Password error");
    return false
  }
  if (vpassw !== vpassc) {
    alert("Passwords must match");
    return false;
  }
  return true;
};
const isPhone = (vphone) => {
  var phoneformat = /^[0-9]+$/;
  if (vphone.match(phoneformat) == null) {
    alert("Numbers only");
    return false;
  }
  if (vphone.length != 10) {
    alert("Phone number is not the required length");
    return false
  }
  return true;
};

const isEmail = (vemail) => {
  var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
  if (vemail.match(mailformat)) {
    return true;
  }
  alert("Email address does not follow the format");
  return false;
};

function isName(vfname, vlname) {
  var nameformat = /^[a-zA-Z]+$/;
  if (vfname.match(nameformat) == null || vlname.match(nameformat) == null) {
    alert("First name and last name can only contain letters");
    return false;
  }
  return true;
};


window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('register_form').addEventListener('submit', (e) => {
    let vfname = document.getElementById('fname').value,
      vlname = document.getElementById('lname').value,
      vemail = document.getElementById('email').value,
      vphone = document.getElementById('phone').value,
      vpassw = document.getElementById('passw').value,
      vpassc = document.getElementById('passc').value;
    if (!isName(vfname, vlname) || !isEmail(vemail) || !isPhone(vphone) || !isPassword(vpassw, vpassc)) {
      e.preventDefault(); // stop submission
    }
  });
});

<script type="text/javascript" src="cue/js/veri.js"></script>

<form id="register_form" method="post" action="signup.php">
  <p class="info">First Name</p>
  <div class="form-group">
    <input id="fname" name="fname" placeholder="John" class="form-control" required />
  </div>
  <p class="info">Surname</p>
  <div class="form-group">
    <input id="lname" name="lname" placeholder="Smith" class="form-control" required />
  </div>
  <p class="info">Email</p>
  <div class="form-group">
    <input type="email" id="email" name="email" placeholder="[email protected]" class="form-control" required />
  </div>
  <p class="info">Phone Number</p>
  <div class="form-group">
    <input type="phone" id="phone" name="phone" placeholder="0412456789" class="form-control" required />
  </div>
  <p class="info">Password</p>
  <div class="form-group">
    <input id="passw" name="passw" placeholder="$0aP2S" class="form-control" required />
  </div>
  <p class="info">Confirm Password</p>
  <div class="form-group">
    <input id="passc" name="passc" placeholder="$0aP2S" class="form-control" required />
  </div>
  <div class="form-btn">
    <input type="reset" class="btn-reset" value="RESET" />
    <input type="submit" value="SUBMIT" class="btn-submit" />
  </div>
</form>

function Signup() {
  var vfname = document.forms["register_form"]['fname'].value;
  var vlname = document.forms["register_form"]['lname'].value;
  var vemail = document.forms["register_form"]['email'].value;
  var vphone = document.forms["register_form"]['phone'].value;
  var vpassw = document.forms["register_form"]['passw'].value;
  var vpassc = document.forms["register_form"]['passc'].value;

  if (Name(vfname, vlname)) {
    if (Email(vemail)) {
      if (Phone(vphone)) {
        if (Password(vpassw, vpassc)) {
          alert("Verify success");
          return true;
        }
      }
    }
  }
  return false; // Return false if any validation fails
}

function Password(vpassw, vpassc) {
    var passwordmatch = /^[A-Za-z0-9s]+$/;
    
    // Check if passwords match directly
    if (vpassw === vpassc) {
        // Check if password matches the pattern
        if (vpassw.match(passwordmatch) === null) {
            alert("Must enter a password");
            return false;
        } else {
            return true;
        }
    } else {
        alert("Passwords do not match");
        return false;
    }
}

function Phone(vphone) {
  var phoneformat = /^[0-9]+$/;
  if (vphone.match(phoneformat) == null) {
    alert("Numbers only");
    return false;
  } else {
    if (vphone.length != 10) {
      alert("Phone number is not the required length");
      return false;
    } else {
      return true;
    }
  }
}

function Email(vemail) {
  var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
  if (vemail.match(mailformat)) {
    return true;
  } else {
    alert("Email address does not follow the format");
    return false;
  }
}

function Name(vfname, vlname) {
  var nameformat = /^[a-zA-Z]+$/;
  if (vfname.match(nameformat) == null || vlname.match(nameformat) == null) {
    alert("First name and last name can only contain letters");
    return false;
  } else {
    return true;
  }
}

<form name="register_form" method="post" action="http://tlocalhost/ds/signup.php" onsubmit="return Signup();">
  <p class="info">First Name</p>
  <div class="form-group">
    <input id="fname" name="fname" placeholder="John" class="form-control" required />
  </div>
  <p class="info">Surname</p>
  <div class="form-group">
    <input id="lname" name="lname" placeholder="Smith" class="form-control" required />
  </div>
  <p class="info">Email</p>
  <div class="form-group">
    <input type="email" id="email" name="email" placeholder="[email protected]" class="form-control" required />
  </div>
  <p class="info">Phone Number</p>
  <div class="form-group">
    <input type="phone" id="phone" name="phone" placeholder="0412456789" class="form-control" required />
  </div>
  <p class="info">Password</p>
  <div class="form-group">
    <input id="passw" name="passw" placeholder="$0aP2S" class="form-control" required />
  </div>
  <p class="info">Confirm Password</p>
  <div class="form-group">
    <input id="passc" name="passc" placeholder="$0aP2S" class="form-control" required />
  </div>
  <div class="form-btn">
    <input type="reset" class="btn-reset" value="RESET" />
    <input type="submit" value="SUBMIT" class="btn-submit" />
  </div>
</form>

This is the modified part.
You can change this.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I don't know why my JavaScript is not validating my form

Answers