Question

我有一个语义形式：

<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表单WITHOUT CHANGING页面。这一次，我使用semantic-ui验证来确保输入的类别名称是UNIQUE（因此尚未在DB中）并确保它不是EMPTY。如果我输入一个唯一的名称，然后单击“提交”按钮。它通过了验证。然后它调用上面的onSuccess回调并将类别名称插入MONGO DB数据库，因为Meteor是REACTIVE，页面更新自己显示新的类别。

我的问题是，在调用onSuccess回调之后，Semantic-UI似乎再次验证了表单。这使我处于不应该再次显示错误消息的情况。我陷入了这种情况....如果我什么都不做，只是保留输入字段的值，就像点击它一样，那么这次验证会再次根据数据库中的值检查值它使表单无效，因为该值不再是UNIQUE（因为它刚刚插入）。我可以选择在调用onSuccess时再将该输入字段设为空。但是，如果我这样做，语义UI会抱怨该字段为空且不应为空。

理想情况下，我想在onSuccess回调中写一些内容来告诉语义 - 它已经完成了它的验证工作，这就是为什么它已经达到了onSuccess并且请不要重新实现，因为它会显示我不想显示的错误消息.....

我尝试过：

$('form').form('clear')

和

$('form').form('reset')

在onSuccess内，但我发现验证发生在onSuccess之后，因此重置表单或清除表单只会使字段为空，而语义ui表单会抱怨没有值字段。

有解决方法吗？解决方案是什么？

非常感谢

Answer 1

我不确定它是否有帮助但是preventDefault是功能，而不是属性：

e.preventDefault();

语义UI和Meteor JS：在不改变页面的情况下验证表单

1 个答案: