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

【问题标题】：Semantic-UI avoid trigger form validation for some click eventsSemantic-UI 避免了某些点击事件的触发表单验证
【发布时间】：2016-01-18 15:44:41
【问题描述】：

我正在使用带有 angular.js 的语义 UI，但 Semantic 的表单验证存在一些问题。

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

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

来自语义文档：

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

escape 按键时字段会模糊

字段将在进入时提交表单

提交事件将附加到表单内任何具有 submit 类的元素上的 click

重置事件将附加到表单内任何元素上的 click 类 reset

清除事件将附加到表单内任何具有 clear 类的元素上的 click

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

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

我在这里缺少什么？

谢谢！

【问题讨论】：

这些按钮是在div 中吗？根据我的经验，div 中的任何内容都是有问题的。
您找到解决方法了吗？我也遇到了同样的问题。
@dearsina 遗憾的是没有。我在没有使用语义表单验证的情况下对所有验证进行了编码。在那个小项目之后，我改为引导程序。

标签： javascript jquery angularjs semantic-ui

【解决方案1】：

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

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

【讨论】：