语义 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 数据库数据库中：

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

这是我第一次在不更改页面的情况下使用语义-UI 表单。这一次，我使用 semantic-ui 验证来确保输入的类别名称是唯一的（因此还不在数据库中）并确保它不是空的。如果我输入一个唯一的名称，然后单击提交按钮。它通过了验证。然后它调用 onSuccess 回调，并将类别名称插入 MONGO DB 数据库，因为 Meteor 是响应式的，页面会自行更新并显示新类别。

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

理想情况下，我想在 onSuccess 回调中写一些东西来告诉 semantic-ui 它已经完成了验证工作，这就是它达到 onSuccess 的原因，请不要' T REVALIDATE 因为它会显示我不想显示的错误消息.....

我试过：

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

和

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

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

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

非常感谢

Answer 1

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

e.preventDefault();

Answer 2

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

出现问题是因为尽管您使用

清除并重置了表单

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

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

<div class="ui error message">

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

<div class="ui message">

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

我解决这个问题的方法就是使用 jquery 从 ui-message 中删除“.error”class。这可能是一个 hack，或者这可能是 quirk 在语义-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');

}

Answer 3

好的...我找到了一些有用的东西。

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

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

Semantic UI and Meteor JS: Validating Form Without Changing Page

html

javascript

css

meteor

semantic-ui