表单提交时显示错误[关闭]

Question

我想使用 jQuery 显示错误，还没有错误检查，但我只是想了解有关 jQuery 的更多信息，但似乎我无法正常工作。

所以，我想在按下提交按钮时显示错误。我尝试使用 jquery 将可见性设置为可见 onclick 和不可见，但它不起作用。它出现了一秒钟，然后就消失了。我怎样才能让它显示在那里直到下次提交按钮按下？

<form id="quick-register" action="">
    Username: <input type="text" name="quick-username"> <br>
    <span id="quick-user-wrong">Wrong Username (a-z, A-Z, 0-9)</span>

    Password: <input type="password" name="quick-password"> <br>
    <span id="quick-pass-wrong">Wrong Password</span>

    Repeat Password: <input type="password" name="quick-password2"> <br>
    <span id="quick-pass2-wrong">Password doesn't match</span>

    E-mail: <input type="email" name="quick-email"> <br>
    <span id="quick-email-wrong">Invalid E-mail Address</span>

    <button id="quick-submit">Register</button>
</form>

jQuery

$(function () {
    $("#quick-submit").one("click", function () {
        $("#quick-user-wrong").css("visibility", "visible");
    });
});

Answer 1

您可以创建一个事件侦听器，该事件侦听器将在表单提交时触发，您可以取消该表单并稍后再提交。

$( "#quick-register" ).submit(function( e ) {
  //cancel submission
  e.preventDefault();

  // .... your error handling/etc ...
  
  if(noerror){
    //submit form later
    $(this).unbind("submit").submit();
  }

});

目前的问题是正在提交表单。这会导致页面刷新，这就是为什么您只能看到 javascript 工作一小会儿的原因。

Answer 2

当您提交表单时，页面会重新加载（除非您使用 AJAX） 由于这次重新加载，错误只显示了一会儿。 在你的 jQuery 代码中

$("form").on('submit', function(evt){
   //if form errors
   evt.preventDefault();       
   //showerror
   //else do nothing
});

这将阻止页面提交，因此错误将被显示并保持显示

因此，用户可以更改错误内容并再次单击提交按钮。