Question

我有一个网页表单，它使用大量的javascript和ajax来确定每个字段是否有效。它会动态发出警告信息，以帮助用户知道何时出现问题。我甚至在提交按钮上使用“禁用”功能，直到所有内容都符合要求。但问题在于：所有事件处理都是使用“onblur”功能进行的。但是当填写完最后一个字段时，直到用户点击该字段才会进行验证。但他们为什么会这样？没有什么可以在页面上做，但点击提交，他们不能做，直到他们点击其他地方，在其他任何地方，首先（以引发验证事件）。我正试图找到解决这个问题的方法。必须有一种方式，他们不必进行额外的点击。它似乎并不专业。这有一个标准的方法吗？每次用户键入单个字母时，是否可以触发验证事件？

提前致谢

Answer 1

表单节点有一个onsubmit事件，当用户尝试提交表单时会触发该事件。您可以使用它来验证所有表单字段，并决定是否让用户提交表单。一般实现如下：

<form onsubmit="return validateForm()">
    ...
</form>

在JavaScript函数中，如果用户可以继续提交表单，则必须返回true;如果提交表单，则必须返回false以取消用户的请求。

（在Psuedo-code中）：

function validateForm(){
    if(formIsOkay){
        return true;
    }else{
        return false;
    }
}

Answer 2

您可以使用onkeyup验证每个字段，并保留用户对onblur方法的通知，这样就不会让人烦恼。如果所有字段在onkeyup上都有效，请启用提交按钮。

Answer 3

考虑到{onChange，onKeyup，blur等}的限制，当涉及到处理复制/粘贴或其他边缘情况时，我可能会添加一个计时器来每隔500ms左右轮询一次并启用/禁用提交按钮：

window.setInterval(checkEnableSubmit, 500);

function checkEnableSubmit(){
   if(validateForm()){
       // enable submit button
   } 
}

function validateForm(){
     if(formIsOkay){
         return true;
     }
     return false;
}

我仍然会在按钮单击时调用validateForm（），以避免用户在调用计时器之前使数据无效并提交。服务器端验证是给定的，但我想尽可能避免错误提交。

在表单有效之前，防止用户单击“提交”

3 个答案: