让用户在表单有效前点击'提交'

我有一个web表单，它使用大量的javascript和ajax来确定每个字段是否有效。它会即时提供警告消息，帮助用户了解何时出现问题。我甚至使用我的提交按钮上的“禁用”功能，直到一切都达到了鼻烟。但问题在于：所有事件处理都是使用“onblur”功能进行的。但是当填写完最后一个字段时，直到用户点击远离该字段才会进行验证。但为什么他们呢？在页面上没有什么可做的，但点击提交，他们不能做的，直到他们在其他地方，其他地方首先点击（引发验证事件）。我试图找到解决办法。必须有一种方法，他们不必额外点击。它看起来并不专业。有没有一个标准的方法呢？每次用户输入单个字母时，是否可以触发验证事件？让用户在表单有效前点击'提交'

在此先感谢

来源

2012-04-25 VoltzRoad

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

来源

2012-04-25 03:49:08 gcochard

这是一个开始，但我认为也可以在没有键盘的情况下编辑字段，例如使用鼠标右键菜单进行复制/粘贴或拖放，因此键盘事件不是字段可以更改的唯一方式。 – jfriend00 2012-04-25 03:51:55

看起来你也可以使用onChange事件。这将确保它在每次更新后被调用。 – gcochard 2012-04-25 03:58:25

这是我的理解，onchange只会失去焦点领域（如果内容已经改变）。请参阅[MDN参考信息]（https://developer.mozilla.org/en/DOM/element.onchange）。 – jfriend00 2012-04-25 04:00:29

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

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

而在你的JavaScript函数，你必须返回true，如果用户可以继续提交表单，或提交表单前false就取消用户的请求。

（在伪代码）：

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

来源

2012-04-25 03:51:30

即时通知代码分离出来，但我不能让它阻止表单提交 – VoltzRoad 2012-04-26 01:33:57

没关系，我想通了。谢谢您的帮助 – VoltzRoad 2012-04-26 02:08:38

鉴于{的onChange，的onkeyup，模糊等}，当涉及到处理的局限性复制/粘贴或其它边缘情况下，我可能会添加一个计时器调查每500ms左右，启用/禁用提交按钮：

window.setInterval(checkEnableSubmit, 500); 

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

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

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

来源

2012-04-25 05:41:32 nvuono

让用户在表单有效前点击'提交'

回答

相关问题