Question

在我的语义UI表单（<div class="ui form">中，似乎每个按钮都会触发表单验证，即使它不是提交按钮也是如此。

以下两种不同的按钮：

<button class="ui blue right labeled icon primary submit button">
  <i class="right arrow icon"></i>
  Submit
</button>

和

<button class="ui blue button">  
  Something Else
</button>

这两个

都在semnatic UI表单元素内。都触发我的验证规则（标准设置规则）：

$('.ui.form')
  .form({
    fields: {
      example:: {
        identifier: 'example',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter at least one thing'
          }
        ]
      }   
    }
  }
  )
;

我只能在网上找到的“解决方案”是创建这样的按钮：

<input type="button"  class="ui blue button">
Test
</input>

但这不会将文本（“测试”）放在按钮内，也无法使按钮的大小与其他按钮相同。

有没有一种方法可以使其不触发我的验证？为何不提交按钮如此操作，这很令人困惑。

Answer 1

只需定义按钮的类型。默认类型为submit：

<Button type="button" />

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

Answer 2

我能够以不同的方式实现这一点，因为按钮 type=button 控件在忽略验证时没有提交，如果我手动提交，semanticui 的默认事件处理程序将进行干预并显示验证错误。

我的用例有两个按钮，一个是保存草稿，另一个是完成（最终保存）。第一个必须按原样保存数据，而不触发验证，而另一个将触发验证然后保存。

我还使用我为此项目自定义实现的数据属性来实现所有验证器，因此表单验证器位于 JS 文件中。

在我的表单验证失败方法中，我包含了一个委托函数，我可以在我的页面上设置它，并根据点击它的按钮，然后能够返回 true 或 false。

我在 JS 文件中的表单验证器

$('.ui.form').form({
    inline: true,
    on: 'submit',
    fields: formFields,
    transition: 'fade',
    keyboardShortcuts: false,
    onFailure: function () {
        var returnValue = false; //Default to false, since validations failed

        //If the delegate is present, fire it to evaluate
        if (typeof window.delegValidate == 'function') {
            returnValue = window.delegValidate();
        }

        //Ignore the toast if the delegate evaluated to TRUE
        if (!returnValue) {
            $('body')
                .toast({
                    title: 'Unable to save',
                    message: 'Please enter all required field data before saving.',
                    classProgress: 'red',
                    showProgress: 'top',
                    progressUp: true,
                    position: 'bottom right',
                    showIcon: 'red exclamation triangle'
                });
        }
        return returnValue; // false is required if you don't want to let it submit
    }
});

在我的页面上，我将一个函数附加到窗口，因为我的表单验证在一个 JS 文件中。

页面功能

       //For all postback buttons, save the id value in a hidden field for use in the delegate
        $('.postbackButton').bind('click', function (e) {
            $('#ButtonClicked').val(this.id); // a hidden field on the page
        });

        //setting the delegate for use in the form validations
        window.delegValidate = function () {
            //For the save button, just ignore the validations and return true
            //This in turn is invoked by the failure method of the form validation that is 
            //dynamically attached to the page, and hence this return value is respected
            //over the false that is otherwise sent back for when we want to interrupt the page
            //since there are errors normally.
            if ($('#ButtonClicked').val() == 'Save')
                return true;
            else // if value is finalize, let it return false
                return false;
        }

对于我不想要此功能的其他页面，我无法编写委托方法，并且默认验证会在提交按钮上按预期触发。

希望这对仍在寻找方法的人有所帮助。 :)

所有按钮触发表单验证语义ui

2 个答案:

我在 JS 文件中的表单验证器

页面功能