Semantic ui Form

Question

For some reason submit event is not working for a simple form using the semantic ui package.

This is my form.

<form class="ui form register-form">
  <h4 class="ui dividing header">Create your AC Account</h4>
  <div class="">
    <div class="required field">
      <div class="ui icon input">
        <input type="text" placeholder="Username">
      </div>
    </div>
  </div>
  <div class="ui submit button register-button">Register</div>
 </form>

So how the submit event should look?

Template.example.events({
 'submit .register-button' : function() {
  console.log("submited")
  }
})

NOTE: also im truing with the form class name .register-form

Answer 1

Your form has no submit button. Only a div formatted as a button with the class of submit. You'll either need to add a click handler to the div or switch to an actual button.

Answer 2

Change your template markup to include a submit button :

<template name="example">
  <form class="ui form register-form">
    <h4 class="ui dividing header">Create your AC Account</h4>
    <div class="">
      <div class="required field">
        <div class="ui icon input">
          <input type="text" placeholder="Username">
        </div>
      </div>
    </div>
    <button class="ui submit button register-button" type="submit">Register</button>
  </form>
</template>

Then listen on the submit event on the form element :

Template.example.events({
  "submit form": function(event){
    event.preventDefault();
    //
    [...]
  }
});