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

All buttons trigger form validation semantic ui

在我的语义 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'
          }
        ]
      }   
    }
  }
  )
;

我在网上只能找到 "Solution" 创建这样的按钮:

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

但这并没有将文本 ("test") 放入按钮内,也无法使按钮的大小与其他按钮相同。

有没有办法让它不触发我的验证?非常困惑为什么非提交按钮会这样做。

简单定义按钮的类型。默认类型为 submit:

<Button type="button" />

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

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

我的用例有两个按钮,一个是 save draft,另一个是 finalize(最终保存)。第一个必须按原样保存数据,不触发验证,而另一个将触发验证然后保存。

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

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

我在 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
    }
});

并且在我的页面上,我将一个函数附加到 window,因为我的表单验证在 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;
        }

对于我不需要此功能的其他页面,我可以简单地不编写委托方法,默认验证会按预期在提交按钮上触发。

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