语义 UI onSuccess，onFailure 回调不会在表单验证时触发答案

【问题标题】：Semantic UI onSuccess, onFailure callbacks not being fired upon form validation语义 UI onSuccess，onFailure 回调不会在表单验证时触发
【发布时间】：2016-02-09 15:58:08
【问题描述】：

在以下验证用户名具有值且密码匹配的代码中，即使正在执行/强制执行验证规则，也不会触发 onSuccess 和 onFailure 回调。我已经独立测试了它的所有其他部分，并且这个布局完全遵循文档，所以我已经排除了语法错误。除了下面使用的语法，我还尝试了 $().form().onSuccess().onFailure() 的格式，但得到了“未捕获的 TypeError：onSuccess 不是函数”。在这里摆弄：Semantic UI onSuccess, onFailure callback example.

$(function(){
    $('#main')
        .form({
            on: 'blur',
            fields: {
                username: {
                    identifier : 'username',
                    rules: [
                        {
                            type : 'empty'
                        }
                    ]
                },
                password1: {
                    identifier  : 'password1',
                    rules: [
                        {
                            type   : 'match[password2]',
                            prompt : 'Please enter the same value in both fields'
                        }
                    ]
                },
                password2: {
                    identifier  : 'password2',
                    rules: [
                        {
                            type   : 'match[password1]',
                            prompt : 'Please enter the same value in both fields'
                        }
                    ]
                }
            },
            onSuccess: function() {
                $(".ui.button[name='account']").removeClass('disabled');
                console.log('Success');
            },
            onFailure: function() {
                $(".ui.button[name='account']").addClass('disabled');
                console.log('Failure');
            }
        }
    );
});

【问题讨论】：

我刚刚更新了jsfiddle上的代码jsfiddle.net/6y7w57xv/3

标签： javascript semantic-ui

【解决方案1】：

关键是这样称呼它。 $('#main').form(fieldRules, settings); onFailure 和 onSuccess 在设置中注册。

看看修改后的代码：

    $(function(){
        $('#main')
            .form({
                    username: {
                        identifier : 'username',
                        rules: [
                            {
                                type : 'empty'
                            }
                        ]
                    },
                    password1: {
                        identifier  : 'password1',
                        rules: [
                                {
                                    type: 'empty',
                              prompt: 'Please enter the password'
                                },
                            {
                                type   : 'match[password2]',
                                prompt : 'Please enter the same value in both fields'
                            }
                        ]
                    },
                    password2: {
                        identifier  : 'password2',
                        rules: [
                            {
                                type   : 'match[password1]',
                                prompt : 'Please enter the same value in both fields'
                            }
                        ]
                    }
                }, {
                    on: 'blur',
                  inline: true,
                  onSuccess: function() {
                    alert('Success');
                    return false; // false is required if you do don't want to let it submit

                    },
                    onFailure: function() {
                    alert('Failure');
                    return false; // false is required if you do don't want to let it submit                                            
                    }
                  });
    });

【讨论】：

那根本行不通——验证现在甚至都没有运行。加上将on 和inline 放在第一个对象中就可以了，那么为什么onSuccess 和onFailure 不能呢？我确保删除了第一个对象中的包装 fields: {}，但仍然没有任何反应。
啊哈！至少在最新版本 (2.2.x) 中，您确实不使用第二个设置对象。 OP 实际上已经有了正确的代码 - 问题是 onSuccess 和 onFailure 回调存在不直观的行为，特别是在我使用单字段表单时。当基于on 方法的验证完成时，它们不被调用。即：on: 'blur' 或on: 'change' 并不意味着onSuccess 将在最后一个字段验证后立即被调用。您必须提交表单，或者如果是单字段表单，请改用onValid 事件。

【解决方案2】：

我也遇到了这个问题。我尝试了一切，我可以 onSuccess 开火的唯一方法是这样做：

  const formValidated = $('.ui.form').form(
     {
        fields: {
           name: {
              identifier: 'name',
              rules: [ 
                 {
                    type   : 'empty',
                    prompt : 'Please enter a name for the camera'
                 }
              ]
           },
        }
     }
  )

  if ($(formValidated).form('is valid')) {
     this.handleSave();
  } else {
     return false;
  }

【讨论】：