语义 UI 在成功时，在表单验证时未触发失败回调

Semantic UI onSuccess, onFailure callbacks not being fired upon form validation

本文关键字：失败回调表单 UI 成功语义验证更新时间：2023-09-26

在以下验证用户名具有值且密码匹配的代码中，即使正在执行/强制执行验证规则，也不会触发onSuccess和onFailure回调。我已经独立测试了所有其他部分，并且此布局完全遵循文档，因此我排除了语法错误。除了下面使用的语法之外，我还尝试了$（）.form（）.onSuccess（）.onSuccess（）.onFailure（）的格式，但得到了"Uncatch TypeError：onSuccess 不是一个函数"。在这里摆弄：语义 UI onSuccess，onFailure 回调示例。

$(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');
            }
        }
    );
});

关键是要这样称呼它。 $('#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                                            
                    }
                  });
    });

我也遇到了这个问题。我尝试了一切，我能成功开火的唯一方法就是这样做：

  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 @2.4.1，jquery @3.1.1）：

$(document).ready(function () {
  $('#message-center form').form({
    fields: {
      email: {
        identifier: 'email',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your email.',
          },
          {
            type: 'email',
            prompt: 'Please enter a valid email.',
          },
        ],
      },
    },
    onSuccess: function (event) {
      event.preventDefault();
      sendMessage(event);
      return false;
    },
  });
});

请注意，onSuccess 与 fields 位于同一选项对象上。