Semantic UI and Meteor JS: Validating Form Without Changing Page

Question

I have a 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 this form to enter new Categories on my Page. When I click the submit button with a unique name, the forms passes validation and I am able to insert that new category name into my 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 is my first time to use Semantic-UI form WITHOUT CHANGING page. This time, I use semantic-ui validation to make sure the category name inputted is UNIQUE (and therefore not yet in the DB) and to make sure it is not EMPTY. If I enter a name that is unique, and click the submit button. It passes the validation. It then calls the onSuccess callback as above and insert the category name into the MONGO DB database and because Meteor is REACTIVE, the page updates itself showing the new Category.

My problem is that after calling the onSuccess callback, Semantic-UI seem to validate the form again. This puts me in a situation where the error messages are displayed again when it should not be. I'm stuck in this situation....if I don't do anything and just leave the value of input field as it is when it was clicked, then the validation this time checks the value again against the value in the DB and it invalidates the form because the value is no longer UNIQUE (as it has just been inserted). I have the option to make that input field empty again when onSuccess is called. But if I do that, semantic UI complains that the field is empty and it should not be empty.

Ideally, I would like to write something inside the onSuccess callback to tell semantic-ui that it has done its job of validating that is why it has reached on onSuccess and PLEASE DON'T REVALIDATE as it will show the error messages that I don't want displayed.....

I've tried putting:

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

and

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

inside onSuccess but I have found that the validation happens after onSuccess therefore resetting the form or clearing the form only makes the field empty and the semantic-ui form complains about not having a value for that field.

Is there a way around this? What's the solution?

Thank you very much

Answer 1

Ok...I found something that works.

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

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

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

I had a similar issue with form validation. i.e after the form was revalidated it still came up with the error message eventhough the validation was correct.

The problem occurs because although you cleared and reset the form with

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

The form ui-message class will STILL look like this (i.e the '.error' class is still included):

<div class="ui error message">

before the error message was triggered on form validation it would have looked similar to this :

<div class="ui message">

Note that after the form validation error message was triggered the '.error' class was added to ui-message.

The way I solved this issue was simply to remove the '.error' class from ui-message using jquery. This may be a hack or maybe this a quirk in the way semantic-ui is designed and this behaviour is not documented properly?

Here's a little code snippet to demo the way I solved the issue. First the modal setup, then the resetForm() function to prevent the error msg re-appearing.

$('.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');

the way to prevent error messages coming back up a successful validation...

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

I'm not sure if it helps but preventDefault is function, not property:

e.preventDefault();