語義UI和流星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; 
    } 
}; 

這是我第一次使用語義UI形式無需更改頁面。 這一次，我使用semantic-ui驗證來確保輸入的類別名稱是UNIQUE（因此尚未在數據庫中）並確保它不是空的。 如果我輸入一個唯一的名稱，然後單擊提交按鈕。它通過驗證。 然後它調用上面的回調onSuccess並將類別名稱插入到MONGO DB數據庫中，並且由於Meteor是REACTIVE，頁面會自行更新以顯示新的類別。

我的問題是，在調用onSuccess回調之後，Semantic-UI似乎再次驗證了表單。這使我處於錯誤消息不應該顯示時再次顯示的情況。 我被困在這種情況下......如果我什麼也沒做，只是將輸入字段的值保留爲點擊時的值，那麼此次驗證將再次檢查值與數據庫中的值並且它使表單失效，因爲該值不再是UNIQUE（因爲它剛插入）。 當調用onSuccess時，我可以選擇使輸入字段再次爲空。但是，如果我這樣做，語義UI抱怨該字段是空的，它不應該是空的。

理想情況下，我想在onSuccess回調中寫一些東西來告訴semantic-ui它已經完成驗證工作，這就是爲什麼它已經達到了onSuccess並且請不要REVALIDATE，因爲它會顯示錯誤消息我不想顯示.....

我試圖把：

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

和

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

內onSuccess但我發現驗證發生在onSuccess之後，因此重置表單或清除表單只會使字段爲空，並且語義UI表單抱怨沒有該字段的值。

有沒有辦法解決這個問題？ 解決方案是什麼？

非常感謝您

Answer 1

我曾與表單驗證類似的問題。即在表單被重新驗證之後，儘管驗證是正確的，但仍然提供了錯誤消息事件。發生

的問題，因爲雖然你清除並重新形式與

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

形式UI消息類仍然會是這樣的（即中」。錯誤」類仍包含）：對錶單驗證觸發的錯誤消息

<div class="ui error message"> 

之前它會顯得與此類似：

<div class="ui message"> 

注意，觸發表單驗證錯誤消息後， '.error'類被添加到ui-message。

我解決這個問題的方法就是簡單地使用jquery從ui-message中刪除'.error'類。這可能是一種破解，或者這可能是semantic-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 2

我不知道是否有幫助，但的preventDefault是功能，而不是財產：

e.preventDefault(); 

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