How do I submit a real-time validated form with Semantic UI and Meteor?

Question

I have run into a huge problem with my form, which I validate in real time using Semantic UI.

The HTML:

<form class="ui form pin-form">                     
  <div class="field">
    <label>Email</label>
    <input placeholder="name@example.com" name="email_input" type="text">
  </div>
  <div class="ui buttons">
    <input type="submit" class="ui submit positive disabled button login-button" value="Log in">
  </div>
</form>

I added the <form> tag myself and made the submit into an input so that I could access the regular submit form .

The real time validation comes from Semantic UI and a Meteor package: https://github.com/avrora/live-form-validator

On template render I do this:

if (!this._rendered) {
this._rendered = true;
pinForm = $('.ui.form.pin-form');
pinForm.form({
    my_text_input: {
      identifier: 'email_input',
      rules: [
        {
          type: 'empty',
          prompt: 'Type your email address'
        },
        {
          type: 'email',
          prompt: 'This is not yet a valid email address'
        }
      ]
    }
  },
  {
    inline: true,
    on: 'blur',
    transition: 'slide down',
    onSuccess: function () {
      var submitButton = $('.ui.submit.button')
                submitButton.removeClass('disabled')
                return false
    },
            onFailure: function() {
                var submitButton = $('.ui.submit.button')
                submitButton.addClass('disabled')
            }
    })
}

The big problem here is that with return false it doesn't submit the form at all even when click the submit button, and without it it submits the form in real time, which I don't want!

Can anyone see a workaround or do I need to switch validation somehow?

Answer 1

If you want to do a Meteor.call , you could try doing it in the onSuccess function. The package does ask you to save the data manually within the onSuccess function.

The following code logged the email twice.

onSuccess: function () {
    console.log("Email: ", $("input[name=email_input]").val());
    // Submit your form here using a Meteor.call maybe?
    return false;
},

You could alternatively look at aldeed:autoform for handling forms in Meteor.

Answer 2

This could be the stupidest question on all of SO. (Don't worry, I asked the question so I'm only dissing myself!)

Semantic UI literally provides the on: change setting, which will validate the form in real time instead of on: blur which it is set to now.

Oh, man...