CODEWITHSUNDEEP
javascripthtml
Suraj Ghale
Suraj Ghale

Reputation: 1

Form validation using html and javascript

I'm trying to create a form validation using HTML and pure JavaScript as a part of my assignment. However, the age and password validation don't seem to work even with tinkering a lot with code. The age is supposed to be valid if it is between 18 to 60 and the password must be the same as well as according to regex.
Here's the extended code:

Edit: the uage code has been edited but still doesn't work as intended.

function checkPassword(str) {
  var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/;
  return re.test(str);
}

function checkName(str) {
  var ge = /^[a-zA-Z ]+$/;
  return ge.test(str);
}

function mytq() {
  var uname = document.forms.formvalidation.fullname;
  var uemail = document.forms.formvalidation.email;
  var uage = document.forms.formvalidation.age;
  var upwd = document.forms.formvalidation.password;
  var vpwd = document.forms.formvalidation.pwdrpt;


  if (uname.value != "") {
    if (!checkName(uname.value)) {
      window.alert("Please enter a valid name");
      uname.focus();
      return false;
    }
  }

  if (!(uage < 16 || uage > 60)) {
    window.alert("Sorry you're not eligible for the position");
    uage.focus();
    return false;
  }

  if (uemail.value.indexOf("@", 0) < 0 && uemail.value.indexOf(".", 0) < 0) {
    window.alert("Please enter a valid email");
    uemail.focus();
    return false;
  }

  if (upwd.value != "" && upwd.value == vpwd.value) {
    if (!checkPassword(upwd.value)) {
      window.alert("The password you entered is not valid");
      upwd.focus();
      return false;
    }
  }
  return true;
}
<!DOCTYPE html>
<html>

<head>
  <title>Register</title>
  <script type="text/javascript">
  </script>
</head>

<body>
  <form name="formvalidation" method="POST" onsubmit="return mytq();" action="#">

    <h1>Welcome to FTN.</h1>
    <p>Fill this form before</p>
    <hr>

    <label for="name"><b>Full Name</b></label>
    <input type="text" name="fullname" placeholder="Full Name" required>

    <label for="email"><b>Email</b></label>
    <input type="text" name="email" placeholder="Email" required>

    <label for="age"><b>Age</b></label>
    <input type="number" name="age" required>

    <label for="password"><b>Password</b></label>
    <input type="password" name="password" placeholder="Password" required>

    <label for="password-repeat"><b>Re-type password</b></label>
    <input type="password" name="pwdrpt" placeholder="Re-type Password" required>
    <hr>

    <p>By creating this account, you are agreeeing our terms and condition</p>
    <button type="submit" class="registerbtn">Submit</button>

  </form>

</body>

</html>

Upvotes: 0

Views: 93

Answers (1)

Umang Raghuvanshi
Umang Raghuvanshi

Reputation: 1258

Your age comparison is flawed. If you wish to ensure that the age is greater than 16 and less than 60, you should simplify it to

   if(uage < 16 || uage > 60) {
        window.alert("Sorry you're not eligible for the position");
        uage.focus();
        return false;
    }

Upvotes: 3

Related Questions