Question

在以下代码中，验证用户名具有值并且密码匹配，即使正在执行/强制执行验证规则，也不会触发onSuccess和onFailure回调。我已经独立测试了其他所有部分，这个布局完全遵循文档，因此我排除了语法错误。除了下面使用的语法之外，我还尝试了$（）。form（）。onSuccess（）。onFailure（）的格式，但得到了一个＆＃34; Uncaught TypeError：onSuccess不是函数＆＃34;。在这里小提琴：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');
            }
        }
    );
});

Answer 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                                            
                    }
                  });
    });

Answer 2

我也遇到了这个问题。我尝试了所有的东西，唯一能让我成功的方法是：

  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;
  }

语义UI onSuccess，onFailure回调未在表单验证时触发

2 个答案: