javascript - 为什么按回车键提交不起作用

Question

我有一个登录表单，如果输入 sn 焦点，然后按 Enter 键，它将提示错误，要求您填写字段。但是，如果您填写了这两个字段，即使输入正确的凭据然后按 Enter 键，也不会出现错误。什么都没发生。表单刚刚重置。如果我点击按钮，它就可以正常工作。

我使用语义 ui 作为前端框架，并使用其表单验证来检查错误。是因为语义吗？

here语义 ui 表单验证文档的链接

这是我的表格

<form id="login" class="ui large form" method="post" action="">
    <div class="ui stacked secondary  segment">
        <div class="field">
            <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" name="username" placeholder="Nama Pengguna">
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" name="password" placeholder="Kata laluan">
            </div>
        </div>
        <input type="submit" name="btn-login" value="Log-masuk" class="ui fluid large teal submit button">
    </div>

    <div class="ui error message"></div>
</form>

它的 javascript 是

$(document).ready(function() {
    $('.ui.form').form({
        fields: {
            username: {
                identifier: 'username',
                rules: [{
                    type: 'empty',
                    prompt: 'Sila masukkan Nama Pengguna'
                }]
            },
            password: {
                identifier: 'password',
                rules: [{
                    type: 'empty',
                    prompt: 'Sila masukkan Kata Laluan'
                }]
            }
        }
    });
});

Answer 1

这里的问题是表单有 2 个选项。
当您按下回车键提交表单并单击按钮时，您的 Javascript 就会运行。
你不希望它提交，你想触发附加的 JavaScript，所以删除表单 method 和表单 action
这是一般规则，您可以让表单提交处理提交，或者让 JavaScript 处理它。

正如您从 semantic ui docs 中看到的那样该表单没有方法或操作

<div class="ui horizontal divider">or</div>
<form class="ui form segment">
  <div class="two fields">
    <div class="field">
      <label>Username</label>
      <input placeholder="Username" name="username" type="text">
    </div>
    <div class="field">
      <label>Password</label>
      <input type="password" name="password">
    </div>
  </div>
  <div class="inline field">
    <div class="ui checkbox">
      <input type="checkbox" name="terms">
      <label>I agree to the terms and conditions</label>
    </div>
  </div>
  <div class="ui blue submit button">Submit</div>
  <div class="ui error message"></div>
</form>