如何使用 Semantic UI 和 Meteor 提交经过实时验证的表单？

Question

我的表单运行遇到了一个大问题，我使用语义 UI.

对其进行了实时验证

HTML:

<form class="ui form pin-form">                     
  <div class="field">
    <label>Email</label>
    <input placeholder="name@example.com" name="email_input" type="text">
  </div>
  <div class="ui buttons">
    <input type="submit" class="ui submit positive disabled button login-button" value="Log in">
  </div>
</form>

我自己添加了 <form> 标签并将提交变成 input 这样我就可以访问常规的 submit form.

实时验证来自 Semantic UI 和一个 Meteor 包：https://github.com/avrora/live-form-validator

在模板渲染上我这样做：

if (!this._rendered) {
this._rendered = true;
pinForm = $('.ui.form.pin-form');
pinForm.form({
    my_text_input: {
      identifier: 'email_input',
      rules: [
        {
          type: 'empty',
          prompt: 'Type your email address'
        },
        {
          type: 'email',
          prompt: 'This is not yet a valid email address'
        }
      ]
    }
  },
  {
    inline: true,
    on: 'blur',
    transition: 'slide down',
    onSuccess: function () {
      var submitButton = $('.ui.submit.button')
                submitButton.removeClass('disabled')
                return false
    },
            onFailure: function() {
                var submitButton = $('.ui.submit.button')
                submitButton.addClass('disabled')
            }
    })
}

这里最大的问题是 return false 即使点击提交按钮它也根本不提交表单，没有它它会实时提交表单，这是我不想要的!

任何人都可以找到解决方法，或者我是否需要以某种方式切换验证？

Answer 1

如果你想做一个Meteor.call，你可以尝试在onSuccess函数中做。该软件包确实要求您在 onSuccess 函数中手动保存数据。

以下代码记录了两次电子邮件。

onSuccess: function () {
    console.log("Email: ", $("input[name=email_input]").val());
    // Submit your form here using a Meteor.call maybe?
    return false;
},

您也可以查看 aldeed:autoform 在 Meteor 中处理表单。

Answer 2

这可能是所有 SO 中最愚蠢的问题。（别担心，我问这个问题只是在自讨苦吃！）

语义UI字面上提供on: change设置，它将实时验证表单而不是现在设置的on: blur。

哦，伙计...

如何使用 Semantic UI 和 Meteor 提交经过实时验证的表单？

How do I submit a real-time validated form with Semantic UI and Meteor?

javascript

forms

validation

meteor

semantic-ui