CODEWITHSUNDEEP
javascripthtmlformsfunctionvalidation
xan
xan

Reputation: 65

Javascript Function Not Responding

I have a function in an external js file that is supposed to validate some fields on my dummy site but it does not seem to be responding.

My browser console shows no errors so I am not sure where the issue is as I am certain I am calling my function correctly and the script portion to call it is right also.

function checkFields(){

  var fname = document.getElementById("firstname").value;
  var lname = document.getElementById("lastname").value;
  var mail = document.getElementById("email").value;
  var phone = document.getElementById("phonenumber").value;
  var pw = document.getElementById("password").value;
  var cpw = document.getElementById("cpassword").value;

  if ((fname == "") || (fname == null)) {
    return alert('Error', 'Missing Fields');
  }
  if ((lname == "") || (lname == null)) {
    return alert('Error', 'Last Name Missing');
  }
  if ((mail == "") || (mail == null)) {
    return alert('Error', 'Email Missing');
  }
  if ((phone == "") || (phone == null)) {
    return alert('Error', 'Phone Missing');
  }
  if ((pw == "") || (pw == null)) {
    return alert('Error', 'Enter a password');
  }
  if ((cpw == "") || (cpw == null)) {
    return alert('Error', 'Confirm your password please');
  }
  if (pw != cpw) {
    return alert('Error', 'Passwords do not match');
  }
  return false;
}
<!DOCTYPE html>
<html>
<head>
  <title>Website</title>
  <link rel="stylesheet" type="text/css" href="practice.css">
</head>
<body>
<div style="width:100%">
  <div id="header">
      MINIMAL STORE <br />
    
      <div id="head">
       
      </div>
  </div>
    <div id ="left">
      <div><b>Main Menu</b></div>
      <li><a href="nothing">Home</a></li>
      <li><a href="nothing">Register</a></li>
      <li><a href="nothing">Shop</a></li>
      <li><a href="nothing">My Cart</a></li>
      <li><a href="nothing">Checkout</a></li>
  </div>
  <div id="main">
    <h1>Register Now!!!</h1>
    <form action="" method="post" onsubmit="return checkFields()">
        First name:<br>
        <input type="text" id="firstname">
        <br>
        Last name:<br>
        <input type="text" id="lastname">
        <br>
        Email:<br>
        <input type="text" id="email">
        <br>
        Phone Number<br>
        <input type="text" id="phonenumber">
        <br><br>
        <form action="">
            Password: <input type="password" id="password"><br>
            Confirm Password: <input type="password" id="cpassword">
        </form>
        <input type="submit" value="Submit">
    </form>
  </div>
 
  <div id="footer">
  </div>
</div>
<script type="text/javascript" src="prac.js"></script>
</body>
</html>

Upvotes: 1

Views: 48

Answers (1)

Blue
Blue

Reputation: 22911

You have a <form> within another <form> which is causing your form to not submit properly:

<form action="">
    Password: <input type="password" id="password"><br>
    Confirm Password: <input type="password" id="cpassword">
</form>

Forms CANNOT be nested. Simply remove the form around password, and the form will submit to your function properly.

Sidebar:

Please note alert() does not accept multiple parameters. You should also be doing something like:

alert("Error\nMissing Fields");
return false;

And at the end of the function, you should be returning true (To submit the form).

Upvotes: 1

Related Questions