Semantic-UI avoid trigger form validation for some click events

Question

I'm using semantic-ui with angular.js and have some issues with Semantic's form validation.

My form has some buttons and validation is triggered when any of them is clicked. I need to avoid that from some of them, because it's a button which just open one modal panel.

   //NEED TO AVOID TRIGGER VALIDATION FOR THESE TWO BUTTONS
    <button class="mini ui positive  button">
        <div class="agregar linea std">
            <i class="add square medium icon"></i>
        </div>
    </button>
    <div class="or"></div>
    <button class="mini ui red button">
        <div class="agregar linea nostd">
            <i class="add square medium icon"></i>
        </div>
    </button>

//This must trigger validation, and it does !
<div class="ui green ok submit button " ng-click="save(pedido, false, true)" ng-disabled="creating">Guardar</div>

I've click events associated with buttons which open modals.

// buttons to open modal
$('.agregar.linea.std')
    .popup({
        inline   : true,
        hoverable: true,
        position : 'bottom right',
        delay: {
            show: 300,
            hide: 300
        },
        content: 'Agregar linea estandard'
    })
    .click(function(){
        $scope.modalType = 'std';
        $scope.modalInitialize();
        $('.ui.modal').modal('show');
    });
$('.agregar.linea.nostd')
    .popup({
        inline   : true,
        hoverable: true,
        position : 'bottom right',
        delay: {
            show: 300,
            hide: 300
        },
        content: 'Agregar linea no estandard'
    })
    .click(function(){
        $scope.modalType = 'nostd';
        $scope.modalInitialize();
        $('.ui.modal').modal('show');
    });

From semantic documentation:

Built-in Events: Form will automatically attach events to specially labeled form fields

• Fields will blur on escape key press
• Fields will submit form on enter
• Submit events will be attached to click on any element inside the form with class submit
• Reset events will be attached to click on any element inside the form with class reset
• Clear events will be attached to click on any element inside the form with class clear

As far as i can understand my buttons which open modal dialogs do not fit in any of these conditions, however validation is triggered when you click on any of them.

I don´t know why validation is done in those cases, and I've tried to avoid it with no success.

What I'm missing here?

Thank you !

Answer 1

I have found a solution to this. You must use inputs instead of buttons. You can make them look the same as regular buttons by applying the 'ui button' class, like so:

<input type="button" class="mini ui positive  button"></input>