Question

我在表单上有一些客户端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的用户的验证。（验证将运行，但无论如何都会提交）。如果我按下type="submit"按钮可以阻止提交事件，如果它被点击了吗？我正在使用JQuery，JQuery可以抑制提交吗？我希望我的验证能够处理它是否被提交。

Answer 1

您可以通过执行以下操作来抑制提交点击次数：

$('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
});

Answer 2

您可以通过在form元素中设置onsubmit处理程序来禁止提交，然后如果验证失败则返回false。

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

Answer 3

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

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

来自文档：

将submit事件发送给用户尝试时的元素提交表格。它只能附加元素。表格可以通过单击一个提交明确的<input type="submit">， <input type="image">或<button type="submit">，或按Enter键当某个表单元素具有焦点时。

仅在禁用javascript时禁止提交提交事件/提交按钮

3 个答案: