Question

我有一个包含多个字段的表单，但只有一个必填字段。问题是当填写必填字段并按下回车键时，表格将被提交。

如果在文本区域内按Enter键没有问题，但对于文本框，表单将被提交。

我认为以下是解决方案。

订阅podio表单提交事件。
找到导致表单提交的密钥
如果通过Enter键触发表单提交，则阻止默认操作。

现在我正在使用以下方法。

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {              
      e.preventDefault();
    }
});

工作正常。但有没有办法可以在表单提交事件中执行此操作？

Answer 1

在上一个回答中看到您的评论后，您可以像fiddle

一样验证您的表单

<强> HTML：

displayName

<强> JS：

<table><form>
<tr>
    <td>First Name:
    </td>
    <td><input type='text' id='txtFName'/ >
    </td>
</tr>
<tr>
    <td>Last Name:
    </td>
    <td><input type='text' id='txtLName'/ >
    </td>
</tr>
<tr>
    <td>Age:
    </td>
    <td><input type='text' id='txtAge'/ >
    </td>
</tr>
<tr>
    <td>Email:
    </td>
    <td><input type='text' id='txtEmail'/ >
    </td>
</tr>
<tr>
    <td colspan="2" style='text-align:center;'><input type="submit" id="btnSubmit" value=" Submit ">
    </td>
</tr>
</form>
</table>

Answer 2

旧回答：

＆＃13;

var Keys = {
  ENTER: 13
};

$('form').on('submit', function(e) {
  e.preventDefault();

  if (checkIfAllRequiredFieldsAreFilled()) {
    $(this)[0].submit(); //call native event, since calling the jquery event will let you end up in the same function over and over again
  }
});

function checkIfAllRequiredFieldsAreFilled() {
  //do your checkings here, if they are complex. Otherwise just do them in the if-clause
  return true;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如果您只是想阻止并意外提交，请按enter：

＆＃13;

    var Keys = {
        ENTER: 13
    };

    $('form input').on('keypress', function (event) {
        if (event.keyCode == Keys.ENTER) {
           event.preventDefault();
           console.log('Prevented Form-submit from: ', this);
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label>
        Text: <input type="text"/>
    </label>
    <label>
        Number: <input type="number"/>
    </label>
    <button type="submit">submit</button>
</form>

＆＃13;

Don't use .bind(), use .on():

从jQuery 3.0开始，.bind（）已被弃用。它被取代了用于将事件处理程序附加到文档的.on（）方法 jQuery 1.7 [...]

如何找到触发表单提交事件的键

2 个答案: