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

I was able to implement this in a different way, as the button type=button control while ignoring the validations, did not submit, and if I did submit manually the default event handler of semanticui would intervene and show the validation errors.

My use case two buttons, one a save draft and the other a finalize (final save). The first one had to save the data as is, without triggering the validations, while the other would trigger validations and then save.

I am also implementing all the validators using data attributes that I custom implemented for this project, hence the form validator is inside a JS file.

In my form validation's failure method, I included a delegate function which I could set on my page and depending on which button clicked it, then be able to return true or false.

My form validator inside a JS file

$('.ui.form').form({
    inline: true,
    on: 'submit',
    fields: formFields,
    transition: 'fade',
    keyboardShortcuts: false,
    onFailure: function () {
        var returnValue = false; //Default to false, since validations failed

        //If the delegate is present, fire it to evaluate
        if (typeof window.delegValidate == 'function') {
            returnValue = window.delegValidate();
        }

        //Ignore the toast if the delegate evaluated to TRUE
        if (!returnValue) {
            $('body')
                .toast({
                    title: 'Unable to save',
                    message: 'Please enter all required field data before saving.',
                    classProgress: 'red',
                    showProgress: 'top',
                    progressUp: true,
                    position: 'bottom right',
                    showIcon: 'red exclamation triangle'
                });
        }
        return returnValue; // false is required if you don't want to let it submit
    }
});

and on my page I attached a function to the window, since my form validation is inside a JS file.

Page function

       //For all postback buttons, save the id value in a hidden field for use in the delegate
        $('.postbackButton').bind('click', function (e) {
            $('#ButtonClicked').val(this.id); // a hidden field on the page
        });

        //setting the delegate for use in the form validations
        window.delegValidate = function () {
            //For the save button, just ignore the validations and return true
            //This in turn is invoked by the failure method of the form validation that is 
            //dynamically attached to the page, and hence this return value is respected
            //over the false that is otherwise sent back for when we want to interrupt the page
            //since there are errors normally.
            if ($('#ButtonClicked').val() == 'Save')
                return true;
            else // if value is finalize, let it return false
                return false;
        }

For other pages where I don't want this functionality, I can simply not write the delegate method and the default validation fires as expected on the submit button.

Hope this helps someone still looking for a way to do this. :)

Answer 2

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