我如何提交一个实时验证的表单与语义UI和流星
How do I submit a real-time validated form with Semantic UI and Meteor?
我的表单遇到了一个巨大的问题,我使用Semantic 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
它不提交的形式在所有,甚至当点击提交按钮,没有它提交的形式在实时,这是我不想要的!
任何人都可以看到一个解决方案,或者我需要以某种方式切换验证?
如果你想做一个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来处理流星中的表单。
这可能是最愚蠢的问题了。(别担心,我问了这个问题,所以我只是在侮辱自己!)
语义UI实际上提供了on: change
设置,它将实时验证表单,而不是现在设置的on: blur
。
哦,人…
相关文章:
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 语义ui表单验证:图像url
- 使用Backbone在模型更改时渲染表单会导致表单UI错误
- 验证表单中的 jQuery-UI 微调器
- 具有输入类型文件字段的语义UI重置表单
- Safari在表单提交期间未更新UI
- 检查angularjs中未保存的表单数据(使用ui路由器的多个表单)
- jquery ui模式框中的表单隐藏后,键盘将不再被调用
- 仅当表单上存在某些条件时.aspx引发 jQuery-UI 确认对话框
- 无法在 jquery.html() 之后将表单提交到 jquery ui 对话框中
- AngularJS多步骤表单(ui.router)提交
- 使用 jQuery UI 模式表单永久更改 HTML 文本
- 在带有 ui:repeat 的表单中使用引导开关
- Symfony2在不同的JQuery UI选项卡中使用多个表单,但单个页面
- 一个字段上的语义 UI 表单验证规则是否可以以另一个字段为条件
- 无法将表单输入字段上的 JQuery UI 工具提示限制为仅在单击/焦点事件上显示
- XML 与 JSON 在 UI 上将完整的树传递到基于决策的动态表单
- 语义 UI 在成功时,在表单验证时未触发失败回调
- 如何将块UI与setTimeout一起使用,并在表单提交时防止默认
- 使用 jQuery UI 选项卡拆分表单是否会影响表单发布到 PHP