我有一个语义用户界面形式：
<form class="ui form">
<div class="ui form segment">
<div class="ui field">
<label>Enter New Category Name</label>
<div class="ui input">
<input type="text" placeholder="Category Name" id="category-name-input">
</div>
</div>
<div class="ui submit button" id="add-category-btn">
ADD CATEGORY
</div>
</div>
</form>
我使用此表单在页面上输入新的类别。当我单击具有唯一名称的提交按钮时，表单将通过验证，并且能够将该新类别名称插入到我的MONGO DB数据库中：
var settings = {
inline: true,
revalidate: true,
//on: 'blur',
onFailure: function(){
console.log('failed validation');
return false;
},
onSuccess:function(e){
console.log("onSuccess");
e.preventDefault;
ProductCategories.insert({category_name : editedText});
return false;
}
};
这是我第一次使用Semantic-UI表单而无需更改页面。这次，我使用语义UI验证来确保输入的类别名称是UNIQUE（因此不在数据库中），并确保它不是EMPTY。如果我输入的名称是唯一的，请单击“提交”按钮。它通过了验证。然后，它onSuccess按上述方式调用回调并将类别名称插入MONGO DB数据库中，并且由于Meteor为REACTIVE，因此页面会更新自身，显示新的类别。
我的问题是，在调用onSuccess回调之后，Semantic-UI似乎再次验证了表单。这使我处于一种错误消息的状态，错误消息应在不应该出现的情况下再次显示。我陷入了这种情况....如果我什么也不做，只是保持输入字段的值保持不变，则单击该字段时，则这次验证将再次对照数据库中的值检查该值，然后它使表单无效，因为该值不再是UNIQUE（因为它刚刚被插入）。我可以选择在onSuccess调用时再次使该输入字段为空。但是，如果这样做，语义UI会抱怨该字段为空，并且不应为空。
理想情况下，我想在onSuccess回调中写一些内容来告诉语义UI，它已经完成了验证工作，这就是为什么它达到onSuccess的原因，请不要重新验证，因为它将显示我不知道的错误消息要显示...。
我试着把：
$('form').form('clear')
和
$('form').form('reset')
在内部，onSuccess但是我发现验证是在onSuccess因此重置表格或清除表格之后才发生的，只会使该字段为空，而语义UI表单则抱怨该字段没有值。
有没有解决的办法？有什么解决方案？
非常感谢你
我在表单验证中遇到了类似的问题。即，在表单重新验证之后，即使验证是正确的，它仍然会出现错误消息。
发生此问题的原因是，尽管您清除并重置了表单
$('form').form('clear')
$('form').form('reset')
表单ui-message类仍然看起来像这样（即'.error'类仍然包括在内）：
<div class="ui error message">
在表单验证触发错误消息之前，它看起来类似于：
<div class="ui message">
请注意，触发表单验证错误消息后，“。error”类已添加到ui-message。
我解决此问题的方法只是使用jquery从ui消息中删除“ .error”类。这可能是黑客行为，也可能是语义UI设计方式中的一个怪癖，而此行为未得到正确记录吗？
这里有一些代码片段来演示我解决问题的方式。首先是模式设置，然后是resetForm（）函数，以防止错误消息再次出现。
$('.ui.modal.candEntry').modal({
onShow: function () {
$('#email').val(val.emailSearch); // set the email on modal
},
onHide: function () {
resetForm();
},
onApprove: function () {
var ok = validateCandidateModal();
if (ok) {
Session.set('updateJobAlert', false);
var modalContents = $('.candAdd').form('get values');
// add the record to DB
var result = Meteor.call('insertCandidate', modalContents);
console.log('meteor insert '+result);
Router.go('somewhere', { email: modalContents.email } );
}
return ok
},
transition: 'horizontal flip'
}).modal('show');
防止错误消息再次通过成功验证的方法...
function resetForm() {
var candAdd = $('.candAdd');
candAdd.form('reset');
candAdd.form('clear');
// remove the error class so it wont show error msg ( semantic-ui bug ? )
candAdd.removeClass('error');
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句