All buttons trigger form validation semantic ui

Question

In my semantic UI form (<div class="ui form">) it appears every button triggers the form validation, even if it is not a submit button.

Two different kind of buttons below:

<button class="ui blue right labeled icon primary submit button">
  <i class="right arrow icon"></i>
  Submit
</button>

and

<button class="ui blue button">  
  Something Else
</button>

both of these are inside the semnatic UI form element. both trigger my validation rules (standard setup rules) :

$('.ui.form')
  .form({
    fields: {
      example:: {
        identifier: 'example',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter at least one thing'
          }
        ]
      }   
    }
  }
  )
;

Only "Solution" I could find online was creating a button like this:

<input type="button"  class="ui blue button">
Test
</input>

but this doesn't put the text ("test") inside the button, also couldnt get the size of the button to be same as other ones.

Is there a way to get it to not trigger my validation? Pretty stumped on why a non submit button is doing it.

Answer 1

Simply define the type of the button. Default type is submit:

<Button type="button" />

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes