Question

我在外部js文件中有一个函数，它应该验证我的虚拟站点上的某些字段，但它似乎没有响应。

我的浏览器控制台没有显示错误，因此我不确定问题出在哪里，因为我确定我正在正确调用我的函数，并且调用它的脚本部分也是正确的。

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>

Answer 1

您在另一个<form>内有<form>，导致您的表单无法正常提交：

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

Forms CANNOT be nested。只需删除密码周围的表单，表单就会正确提交给您的功能。

<强>侧栏：

请注意alert()不接受多个参数。你也应该这样做：

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

在函数结束时，您应该返回true（提交表单）。

Javascript函数没有响应

1 个答案: