对于 HTML 表单中的 Javascript，尽管有突破性要求，但仍会提交

Question

所以本质上我的问题是我正在尝试制作一个需要满足某些规则的表单，例如密码应该是大写字母并且您需要确认您的密码，但是尽管验证失败，表单仍然会提交。唯一有效的验证是文本框需要在其中写入内容的默认要求。我该怎么做才能使验证实际上阻止表单通过。

我目前拥有的代码的工作原理是它会根据它是否通过返回真/假，只是即使它没有通过，表单仍然会通过。我知道我可能在某个地方需要一个 event.preventDefault() 但我不知道在哪里。

<form  class="w3-container w3-margin" name="login" action="loginAction.jsp">
      
  <h1>Create a Username and Password</h1>
  
  <!-- These divs are the text fields for information the user needs to give the website -->
  <div class="w3-section">
      <label>Username</label>
      <input class="w3-input w3-border" type="text" placeholder="Name" name="username" size="20" required>
  </div>
  <div class="w3-section">
      <label>Email</label>
      <input class="w3-input w3-border" type="text" placeholder="Email" name="email" required>
  </div>
  <!-- For the password the method validPassword() is used which checks if the password has an uppercase -->
  <div class="w3-section">
      <label>Password (Must have at least one upper case)</label>
      <input class="w3-input w3-border" type="text" placeholder="Password"  name="password" onInput="validPassword()" size="15" required>
  </div>
   <!-- For confirm password the method matchingPasswords() is used which checks if the two typed passwords are the same -->
  <div class="w3-section">
      <label>Confirm Password</label>
      <input class="w3-input w3-border" type="text" placeholder="Confirm Password" name="cpassword" onInput="matchingPasswords()" size="15" required>
  </div>
  <!--These are submit and reset buttons -->
  <div class="w3-section">
    <input class="w3-button topbotColor" type="submit" value="Button" />
    <input class="w3-button topbotColor" type="reset" value="Reset" />
  </div>
      
</form>

这是javascript代码。

        //function validPassword is meant to check if the password has a uppercase letter
    function validPassword() {

      //var password stores the password element from the text box
      var password = document.getElementsByName("password");
      //var ucletters is the set of all capital letters
      var ucletters = /^(?=.*[A-Z]).+$/;

      //If there is at least one uppercase in the password text
      if(ucletters.test(password[0].value)){

        //Pass validity and return true
        document.getElementsByName("password").setCustomValidity("");
        return true;

      }
      else {

        //else the password does not have an uppercase
        document.getElementByName.setCustomValidity("This password does not fit criteria");
        return false;

      }

    }

    //matchingPasswords is meant to check if two passwords were the same
    function matchingPasswords() {

      //password stores the text in the password text box
      var password = document.getElementsByName("password");
      //cpassword stores the text in the confirm password text box
      var cpassword = document.getElementsByName("cpassword");

      //If the string in password does not match the string in confirm password
      if (password[0].value !== cpassword[0].value) {

        //it fails validity and should return false
        document.getElementsByName("cpassword").setCustomValidity("Emails do not match");
        return false;

      } 
      else {

        //else it passes and should be true
        document.getElementsByName("cpassword").setCustomValidity("");
        return true;

      }

    }

    /*function completeForm() {

      if (validPassword() !== true && matchingPasswords() !== true){

          event.preventDefault();

      }

    }*/

Answer 1

1.) 移除表单操作值

2.) 为您的代码添加事件监听器以运行（我看不到任何函数是如何运行的）

document.getElementById("your_submit_button").addEventListener('click', function_you_want_to_run);

3.) 使用此代码将客户端重定向到您的表单操作

window.location.url="/link.jsp";