语义 UI 避免对某些点击事件进行触发器表单验证

Semantic-UI avoid trigger form validation for some click events

本文关键字:事件 触发器 验证 表单 UI 语义      更新时间:2023-09-26

我正在使用带有 angular 的语义 UI.js并且对语义的表单验证有一些问题。

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

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

从语义文档:

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

  • 转义键时字段会模糊
  • 字段将在输入时提交表单
  • 提交
  • 事件将被附加,以点击表单内的任何元素与类提交
  • 将附加重置事件以单击表单内的任何元素并进行类重置
  • 将附加清除事件以单击表单内的任何元素,并清除

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

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

我在这里错过了什么?

谢谢!

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

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