尽管使用了 e.preventDefault()，但为什么在验证表单时仍会触发我的表单操作？

Question

如果用户提交长度大于 20 的名称，我想在名称字段上方显示一条消息。这意味着不会提交表单 - 换句话说，不会触发表单的操作。

我已经尝试了几乎所有我能找到的建议，以防止在表单验证时触发表单操作，但似乎没有任何效果。

我遇到了这个问题，无法弄清楚我做错了什么。 如何纠正这个问题？

html：

<form method="POST" id="form" action="/post.php">
  <span class="nameError"></span>
  <input type="text" class="name" name="name" placeholder="Name" required/>
            
  <input class="button" type="submit" value="Submit"/>
</form>

这是我的 jquery：

let name = $('.name');
let nameError= $('.nameError');

$(document).ready(function() {

$('input[type=submit]').on('click', function(e) {
    if (name.length > 20) {
        e.preventDefault();
        nameError.val("Too many characters!");
        return false;
    }
 });

});

Answer 1

我已经修改了验证的逻辑。 基本上我们需要捕获表单的提交事件并使用正确的 jquery 方法来根据选择器检索数据。

 $(document).ready(function() { $("#form").submit(function( event ) { let name = $('.name').val(); let nameError= $('.nameError'); if (name.length > 20) { nameError.text("Too many characters;"). event;preventDefault(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <form method="POST" id="form" action="/post.php"> <input type="text" class="name" name="name" placeholder="Name" required/> <label class="nameError"></label> <br/> <input class="button" type="submit" value="Submit"/> </form>