javascript - Semantic UI and Meteor JS: Validating Form Without Changing Page -

i have semantic-ui form:

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

i use form enter new categories on page. when click submit button unique name, forms passes validation , able insert new category name mongo db database:

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

this first time use semantic-ui form without changing page. time, use semantic-ui validation make sure category name inputted unique (and therefore not yet in db) , make sure not empty. if enter name unique, , click submit button. passes validation. calls onsuccess callback above , insert category name mongo db database , because meteor reactive, page updates showing new category.

my problem after calling onsuccess callback, semantic-ui seem validate form again. puts me in situation error messages displayed again when should not be. i'm stuck in situation....if don't , leave value of input field when clicked, validation time checks value again against value in db , invalidates form because value no longer unique (as has been inserted). have option make input field empty again when onsuccess called. if that, semantic ui complains field empty , should not empty.

ideally, write inside onsuccess callback tell semantic-ui has done job of validating why has reached on onsuccess , please don't revalidate show error messages don't want displayed.....

i've tried putting:

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

and

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

inside onsuccess have found validation happens after onsuccess therefore resetting form or clearing form makes field empty , semantic-ui form complains not having value field.

is there way around this? what's solution?

thank much

i had similar issue form validation. i.e after form revalidated still came error message eventhough validation correct.

the problem occurs because although cleared , reset form with

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

the form ui-message class still (i.e '.error' class still included):

<div class="ui error message"> 

before error message triggered on form validation have looked similar :

<div class="ui message"> 

note after form validation error message triggered '.error' class added ui-message.

the way solved issue remove '.error' class ui-message using jquery. may hack or maybe quirk in way semantic-ui designed , behaviour not documented properly?

here's little code snippet demo way solved issue. first modal setup, resetform() function prevent error msg re-appearing.

$('.ui.modal.candentry').modal({                 onshow: function () {                     $('#email').val(val.emailsearch);  // set email on modal                 },                 onhide: function () {                     resetform();                 },                 onapprove: function () {                     var ok = validatecandidatemodal();                     if (ok) {                         session.set('updatejobalert', false);                         var modalcontents = $('.candadd').form('get values');                         // add record 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'); 

the way prevent error messages coming successful validation...

function resetform() { var candadd = $('.candadd'); candadd.form('reset'); candadd.form('clear'); // remove error class wont show error msg ( semantic-ui bug ? ) candadd.removeclass('error'); 

}