Within my Semantic UI form (<div class="ui form">), it seems that every button is triggering the form validation, even if it's not a submit button.
I have two different types 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 buttons are enclosed within the Semantic UI form element and both trigger my validation rules (which are set up as standard rules):
$('.ui.form')
.form({
fields: {
example:: {
identifier: 'example',
rules: [
{
type : 'empty',
prompt : 'Please enter at least one thing'
}
]
}
}
}
)
;
The only solution I found online was to create a button like this:
<input type="button" class="ui blue button">
Test
</input>
However, this method doesn't place the text ("test") inside the button, and I also couldn't get the size of the button to match the others.
Is there a way to prevent it from triggering my validation? I'm quite puzzled as to why a non-submit button is causing this behavior.