Semantic-UI 避免触发某些点击事件的表单验证 [英] Semantic-UI avoid trigger form validation for some click events

问题描述

我在 angular.js 中使用语义 UI，但在语义的表单验证方面存在一些问题.

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

//需要避免这两个按钮的触发验证<button class="mini ui正按钮"><div class="agregar linea std"><i class="添加方形中等图标"></i>

<div class="or"></div><button class="mini ui red button"><div class="agregar linea nostd"><i class="添加方形中等图标"></i>

//这必须触发验证，它确实如此！<div class="ui green ok submit button" ng-click="save(pedido, false, true)" ng-disabled="creating">Guardar</div>

我已经点击了与打开模态的按钮相关联的事件.

//按钮打开模态$('.agregar.linea.std').弹出({内联:真的，可悬停:真实，位置:'右下'，延迟: {显示: 300,隐藏:300},内容:'Agregar linea estandard'}).click(函数(){$scope.modalType = 'std';$scope.modalInitialize();$('.ui.modal').modal('show');});$('.agregar.linea.nostd').弹出({内联:真的，可悬停:真实，位置:'右下'，延迟: {显示: 300,隐藏:300},content: 'Agregar linea no estandard'}).click(函数(){$scope.modalType = 'nostd';$scope.modalInitialize();$('.ui.modal').modal('show');});

来自语义文档:

<块引用>

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

• 字段会在 escape 按键时模糊
• 字段将在输入
时提交表单
• 提交事件将附加到点击表单内的任何元素，submit
• 重置事件将附加到点击表单内的任何元素，reset
• Clear 事件将附加到 click 类clear
表单内的任何元素

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

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

我在这里缺少什么?

谢谢！

解决方案

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

</input>

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 !

解决方案

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>

这篇关于Semantic-UI 避免触发某些点击事件的表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！