Question

我在angular.js中使用了semantic-ui，并且在语义的表单验证方面存在一些问题。

我的表单有一些按钮，当点击任何按钮时会触发验证。我需要避免其中一些，因为它是一个只打开一个模态面板的按钮。

   //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>

我点击了与打开模态的按钮相关的事件。

// 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');
    });

从语义文档：

内置事件：   表格会自动将事件附加到特别标记的表格字段


字段将在转义键按
时模糊
字段将在输入
上提交表单
提交活动将附加到点击表单内的任何元素提交

重置事件将附加到表单内任何元素上的单击，并且类为重置

明确的事件将附加到点击表单内的任何元素清除

据我所知，打开模态对话框的按钮不适合任何这些条件，但是当您点击其中任何一个时，都会触发验证。

我不知道为什么在这些情况下进行验证，我试图避免它没有成功。

我在这里缺少什么？

谢谢！

Answer 1

我找到了解决方法。您必须使用输入而不是按钮。您可以通过应用'ui button'类使其看起来与常规按钮相同，如下所示：

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

Semantic-UI避免某些点击事件的触发器表单验证

1 个答案: