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

Question

我有一个语义 UI 表单：

<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 验证来确保输入的类别名称是唯一的（因此还没有在数据库中）并确保它不是空的。 如果我输入一个唯一的名称，然后单击提交按钮。它通过了验证。 然后它像上面一样调用onSuccess 回调并将类别名称插入到 MONGO DB 数据库中，因为 Meteor 是 REACTIVE，所以页面会自行更新以显示新的类别。

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

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

我试过把：

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

和

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

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

有没有办法解决这个问题？ 解决办法是什么？

非常感谢

Answer 1

好的...我发现了一些有用的东西。

function resetForm(){
  console.log('inside resetForm');

  $('.ui.form').form('clear');
  $('.ui.form').form('reset');
  $('.error').removeClass('error');
}

然后在onSuccess里面：

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});

    setTimeout(resetForm, 50);

    return true;
  }
};

Answer 2

我在表单验证方面遇到了类似的问题。即在重新验证表单后，即使验证正确，它仍然会出现错误消息。

出现问题是因为虽然您清除并重置了表单

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

表单 ui-message 类仍将如下所示（即仍然包含“.error”类）：

<div class="ui error message">

在表单验证触发错误消息之前，它看起来类似于：

<div class="ui message">

请注意，在触发表单验证错误消息后，“.error”类已添加到 ui-message。

我解决这个问题的方法只是使用 jquery 从 ui-message 中删除“.error”类。这可能是一种 hack，或者这可能是语义 UI 设计方式的一个怪癖，并且这种行为没有正确记录？

这里有一个小代码 sn-p 来演示我解决问题的方式。首先是模态设置，然后是 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');

}

Answer 3

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

e.preventDefault();