尽管返回 false，但表单 onsubmit 不起作用

Question

我无法弄清楚为什么我的表单 onsubmit function 根本不起作用。 我正在尝试创建一个验证确认密码的表单，但我无法让 onsubmit 调用我创建的 function，尽管它似乎写得正确。

<div class="container">
                <h2 class="py-2 page_title">Change Password for <%= user.username %>:</h2>
                <form onsubmit="return confirm_password();" class="form_content" action="/users/edit_password/<%= user._id %>?_method=PUT" method="POST">

                    <div class="row">
                        <div class="form-group col-lg-12">
                            <input class="form-control" name="user[old_password]" placeholder="Old Password" type="password">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-12">
                            <input id="password" class="form-control" name="user[new_password]" placeholder="New Password" type="password">
                        </div>  
                    </div>
                    <div class="row">       
                        <div class="form-group col-lg-12">
                            <input id="confirm_password" class="form-control" name="user[confirm_password]" placeholder="Confirm Password" type="password">
                        </div>              
                    </div>

                    <button id="button" class="button zoom" type="submit">Submit</button>
                </form>
            </div>

Function

function confirm_password(){
    console.log("working");  //This doesn't happen, so I know it isn't even being called
    if (document.getElementById("password") != document.getElementById("confirm_password")){
        alert("Passwords Do Not Match");
        return false;
    }
    return true;
}

我添加了一个警报（“工作”）； 进入文件以确认它已连接，并且我收到了警报。 但是，单击提交后，控制台告诉我“confirm_password”不是 function。 我也尝试为按钮本身添加一个点击监听器，这也不起作用。 有什么明显的我只是想念吗？ 我尝试在 header 和页脚中添加脚本标签，这似乎没有任何改变。

谢谢。

Answer 1

它与您的其中一个 ID 冲突：

<input id="confirm_password"

将 function 名称更改为其他名称，例如：

onsubmit="return confirmPassword(event);"

然后：

function confirmPassword(e) {
  e.preventDefault();
  // your codes here
}

Answer 2

你必须将你的按钮作为一个元素并添加一个事件监听器，然后将你的 function 放在事件监听器回调的 scope 中

 <div class="container">
<h2 class="py-2 page_title">Change Password for <%= user.username %>:</h2>
      <form onsubmit="return confirm_password();" class="form_content" action="/users/edit_password/<%= user._id %>?_method=PUT" method="POST">

          <div class="row">
              <div class="form-group col-lg-12">
                  <input class="form-control" name="user[old_password]" placeholder="Old Password" type="password">
              </div>
          </div>
          <div class="row">
              <div class="form-group col-lg-12">
                  <input id="password" class="form-control" name="user[new_password]" placeholder="New Password" type="password">
              </div>  
          </div>
          <div class="row">       
              <div class="form-group col-lg-12">
                  <input id="Confirm_password" class="form-control" name="user[confirm_password]" placeholder="Confirm Password" type="password">
              </div>              
          </div>

          <button id="button" class="button zoom">Submit</button>
      </form>
  </div>

<script>
  const submitbutton =document.getElementsByClassName("button zoom")[0]
 submitbutton.addEventListener('click',(e)=>{

  confirm_password(e)

})

function confirm_password(e){
const passoword=document.getElementById("password").value 
 const password2=document.getElementById("Confirm_password").value
    if (passoword!=password2){
      e.preventDefault()
        alert("Passwords Do Not Match");
        return false;
    }
    return true;
  }
</script>