代码之家 › 专栏 › 技术社区 › Purrell

仅当禁用javascript时才支持“提交事件/提交”按钮

submit forms html jquery

5

Purrell · 技术社区 · 16 年前

我在表单上进行了一些客户端的javascript验证。效果很好。但我想容纳禁用了javascript的用户。我的验证不是从表单的onSubmit属性运行的,它是绑定到表单中正常按钮的事件处理程序。所以启动验证和提交的按钮实际上不是提交,它只是type=“button”:

<input type="button" value="Ok" class="okbtn">

然后,我将一个事件处理程序注册到它的Click事件,以进行验证。如果一切都通过,则提交:

function clickHandler(event){
    thisForm = event.data.caller
    var valid = submitValidation(thisForm);
    if (valid == true){
        thisForm.submit();
    } else{
      }
}

我的问题是,如果用户禁用了JS,就无法提交表单。我可以做这个按钮 type="submit" ,这对禁用JS的用户有效,但随后它将*始终提交表单并绕过对启用JS的用户的验证。(验证将运行,但仍将提交)。如果我按下按钮 类型=“提交” 如果单击了提交事件,我可以阻止它吗?我正在使用jquery,jquery是否可以取消提交?我希望我的验证能够处理它是否被提交。

3 回复 | 直到 16 年前

1

12

David Hellsing 16 年前

您可以通过执行以下操作来禁止提交单击:

$('input[type=submit]').bind('click', function(e) {
    e.preventDefault() // prevents the form from being submitted
    clickHandler(); // the custom submit action
});

或者,您可以这样取消实际的表单提交:

$('form').bind('submit', function(e) {
    e.preventDefault();
    // etc
});

2

3

clee nortron 16 年前

您可以通过在 form 元素,如果验证失败,则返回false。

因此,如果验证成功,则返回true;如果验证失败,则返回false,而不是调用 thisForm.submit() .

3

cletus 16 年前

将按钮更改为普通提交按钮,并将验证检查绑定到 submit() 窗体上的事件。

$("form").submit(function() {
  if (!submitValidation()) {
    return false;
  }
});

从文档中:

这个 submit 事件发送到元素,当用户试图提交表格。只能附加元素。表格可以通过单击明确的 <input type="submit"> ,请 <input type="image"> 或 <button type="submit"> ,或按Enter键当某个窗体元素具有焦点时。