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>

Answer 2

我遇到了同样的问题。我更喜欢在表单中使用默认的提交按钮，而不是添加额外的javascript以使表单提交工作。

我也有这段代码：

<div class="ui fluid large blue submit button">
   <p>Register</p>
</div>

但是当你用这个替换它时：

<button type="submit" class="blue fluid large ui button">Register</button>

您具有相同的布局，默认提交按钮正在运行。

当然你还需要表单动作和方法：

<form action="/register/process-form" method="POST" class="ui large form">

顺便说一句，我使用玉模板渲染，在玉石上面的代码是：

    form.ui.large.form(action="/register/process-form" method="POST")
      div.ui.stacked.segment
       div.field
         div.ui.left.icon.input
           i.user.icon
           input(type="text" name="email" placeholder="E-mail adres")
         div.ui.fluid.large.blue.submit.button
           p Register
         button.blue.fluid.large.ui.button(type="submit") Register

注意：我在玉器代码中显示两个按钮以显示差异，您需要使用底部按钮。

为什么提交密钥输入不工作

2 个答案: