Javascript 表单onsubmit返回false后仍不起作用

我不明白为什么我的表单onsubmit函数根本不起作用。我试图创建一个表单来验证确认密码，但是我无法让onsubmit调用我创建的函数，尽管它似乎写得正确

<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>

我添加了一个警报（“工作”）；输入文件以确认它已连接，我将收到警报。但是，单击提交后，控制台告诉我“确认密码”不是一个功能。我还尝试过向按钮本身添加一个单击侦听器，但这也不起作用。有什么明显的东西我错过了吗？我尝试在页眉和页脚中添加脚本标记，但这似乎没有改变任何东西

---

谢谢。

它与您的一个ID冲突：

<input id="confirm_password"

然后：

---

它与此处的一个ID冲突：

<input id="confirm_password"

然后：

---

您必须将按钮作为元素添加到事件侦听器中，然后将函数放在事件listner回调的范围内

 <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>

更改的密码：
提交
const submitbutton=document.getElementsByClassName（“按钮缩放”）[0]
submitbutton.addEventListener（'单击'，（e）=>{
确认密码（e）
})
功能确认密码（e）{
const passoword=document.getElementById（“密码”）.value
const password2=document.getElementById（“确认密码”）.value
if（passoword！=密码2）{
e、 预防默认值（）
警报（“密码不匹配”）；
返回false；
}
返回true；
}

您必须将按钮作为元素添加到事件侦听器中，然后将函数放入事件列表器的回调范围中

 <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>

更改的密码：
提交
const submitbutton=document.getElementsByClassName（“按钮缩放”）[0]
submitbutton.addEventListener（'单击'，（e）=>{
确认密码（e）
})
功能确认密码（e）{
const passoword=document.getElementById（“密码”）.value
const password2=document.getElementById（“确认密码”）.value
if（passoword！=密码2）{
e、 预防默认值（）
警报（“密码不匹配”）；
返回false；
}
返回true；
}

提交表单时会发生什么情况？什么都没有，或者它提交时没有调用您的函数？控制台中有任何错误吗？提交时页面似乎会重新加载，您是否尝试阻止该事件？当我单击“提交”时，似乎根本没有调用函数中的任何内容，页面只是加载到调用“操作”的位置。控制台告诉我“确认密码”不是一个函数。当你提交表单时会发生什么？什么都没有，或者它提交时没有调用您的函数？控制台中有任何错误吗？提交时页面似乎会重新加载，您是否尝试阻止该事件？当我单击“提交”时，似乎根本没有调用函数中的任何内容，页面只是加载到调用“操作”的位置。控制台告诉我“确认密码”不是一个函数。不幸的是，这两种解决方案都不起作用。我在js文件中添加了一个警报，以查看它是在页面加载之前还是之后加载的，因为我知道有时候这可能会导致问题。似乎警报和加载发生在页面加载之前，即使在我的html的其余部分之后调用脚本，这会导致问题吗？好的，向按钮添加单击事件侦听器似乎起到了作用，但即使在警告我密码不匹配之后，页面仍然尝试加载表单操作。有没有办法停止从这个页面加载？谢谢。当我将函数重命名为camelcase而不是使用下划线时，这似乎起到了作用。我想这就是问题所在。谢谢你的帮助！是的，您的if语句应该比较从elementsYes检索到的值，非常感谢您的帮助！这一切都帮助我让它工作。不幸的是，这两种解决方案都不起作用。我在js文件中添加了一个警报，以查看它是在页面加载之前还是之后加载的，因为我知道有时候这可能会导致问题。似乎警报和加载发生在页面加载之前，即使在我的html的其余部分之后调用脚本，这会导致问题吗？好的，向按钮添加单击事件侦听器似乎起到了作用，但即使在警告我密码不匹配之后，页面仍然尝试加载表单操作。有没有办法停止从这个页面加载？谢谢。当我将函数重命名为camelcase而不是使用下划线时，这似乎起到了作用。我想这就是问题所在。谢谢你的帮助！是的，您的if语句应该比较从elementsYes检索到的值，非常感谢您的帮助！这一切都帮助我让它工作。不幸的是，它似乎根本没有调用函数。即使我在开始时添加了一个警报，似乎什么也没有发生。是的，所以我在js文件中添加了一个警报，以确认该文件已连接，并且我确实收到了警报。但是，单击提交后，控制台告诉我“确认密码”不是一个功能。我不确定它为什么会这样说。我已经编辑了我的答案，在命名函数中不要使用下划线，所以用confirmPassword（）代替confirm_password（）谢谢你，这似乎奏效了！我一直认为函数的传统命名遵循这种情况，我只是没有意识到下划线会引起问题

 <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>