如果字段无效，则禁用表单中的 "enter" 键

Question

如何禁用 "enter" 键，如果字段无效，它使我们有可能使表单生效并发送表单？

我只做了第一部分，这表明该字段无效，但 "enter" 键始终处于活动状态。所以我的问题很简单，如何从我们看到字段

下的"error-message"那一刻起禁用"enter"键按钮

这是我的测试页 ->

http://500milligrammes.com/facticemagazine/final/unsubscribe/

Answer 1

Try adding this when you show the error:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;`enter code here`
  }
});

Answer 2

您可以使用 enter 键的 keycode value (13) 进行检查。

像下面这样的事情应该做：

$('form').on('keyup keypress', function(e) {
    if (e.which == 13) {
        if (!isValid()) { // your validation function
            e.preventDefault();
            return false;
        } else {
            $(this).submit();
        }
    }
});

Answer 3

我已经查看了您的网站，以实现您的要求：

$("#name").on("keydown", function(e) {
    if(e.which === 13 && $("#name").next(".error-message").is(":visible")) {
        e.preventDefault();
        return false;
    }
});

提交总是在 keydown 上发送，因此我们需要添加一个 keydown 事件处理程序。接下来是检查键是否是回车键 e.which === 13 然后我们只需要检查是否显示错误消息 $("#name").next(".error-message").is(":visible").

如果两个条件都为真，则只需通过调用 e.preventDefault();

来阻止默认操作（提交）

您可以通过在接受回车键之前检查输入是否为空来进一步改进这一点。第一个按键可能是回车键。

$("#name").on("keydown", function(e) {
    if(e.which === 13) {
        if($("#name").next(".error-message").is(":visible") || !$("#name").val()) {
            e.preventDefault();
            return false;
        }
    }
});

如果字段无效，则禁用表单中的 "enter" 键

disable the "enter" key in a form if the field is not valid

html

javascript

forms

validation

key