id-selector在php

Question

我的javascript不会响应我在php代码中的id-tag：

    else {
                    echo '<form = "nav-login" method="post" onsubmit="return noEmptyUserFields();" action="includes/login.inc.php">
                        <input type="text" id="uidz" name="uid" placeholder="Username/e-mail">
                        <input type="password" id="pwdz" name="pwd" placeholder="password">
                        <button type="submit" name="submit">Login</button>
                    </form>
                    <a href="signup.php">Sign up</a>';
                }

但是它响应了我的javascript，它在php之外，看起来像这样：

        <form class="signup-form" method="post" onsubmit="return noEmptyUserFields();" action="includes/signup.inc.php">
        <input type="text" id="first" name="first" placeholder="Firstname">
        <input type="text" id="last" name="last" placeholder="Lastname" >
        <input type="email" id="email" name="email" placeholder="E-mail" >
        <input type="text" id="uid" name="uid" placeholder="Username" >
        <input type="password" id="pwd" name="pwd" placeholder="Password" ></p2>
        <button type="submit" name="submit">Sign up</button></form>

为什么它不会响应php中的id-selector？

我已加入<script src="includes/javascript.js"></script> 在两者上。

我的javascript看起来像这样（noEmptyLoginFields）：

    if (email.trim().length < 1)
    {
        alert('Email must be filled out');
        return false;
    }
    else if(pwd.trim().length < 6)
    {
      alert('Password must contain atleast 6 characters');
      return false;
    }
    else if (first.trim().length < 1)
    {
        alert('First name must be filled out');
        return false;
    }
    else if (last.trim().length < 1)
    {
        alert('Last name must be filled out');
        return false;
    }
    else if (uid.trim().length < 1)
    {
        alert('Username must be filled out');
        return false;
    }
    else return true;
}


 function noEmptyLoginFields()

     var uidz = document.getElementById('uidz').value;
      var pwdz = document.getElementById('pwdz').value;

      if (uidz.trim().length < 1)
        {
            alert('Username and password must be filled out!');
            return false;
        }
        else if(pwdz.trim().length < 1)
        {
          alert('Username and password must be filled out!');
          return false;
        }
    }

Answer 1

您似乎对两个表单验证使用相同的函数名称，这会导致错误。我建议你使用事件处理程序纯粹在javascript中处理表单验证：

document.querySelector("#formId").addEventListener("submit", function() {
  // if(...) return false;
});