jquery - 提交前监听语义 UI 表单验证错误

Question

使用语义 UI 表单、模式和验证，我在模式中有一个表单，并且如果表单无效(提交时会发生这种情况)，我不希望模式关闭。

阻止模式关闭的唯一方法是向提交按钮添加一个 disabled 类。

我想(实时)监听表单并根据当前表单验证状态打开和关闭 disabled 类。

我只能在提交表单后才能使其工作，但不能实时工作

$('#myForm')
    .form({
        title: {
            identifier  : 'title',
            rules: [
                {
                    type   : 'empty',
                    prompt : 'Please enter a title'
                },
                {
                    type   : 'length[2]',
                    prompt : 'At least 6 characters'
                }
            ]
        }
    },
    {
        onSuccess: function() {
            $('#submit').removeClass('disabled');
        },
        onFailure: function() {
            $('#submit').addClass('disabled');
        }
    }
);

Answer 1

不要使用禁用来提交，而是确保即使单击提交(模式批准)按钮，模式也保持打开状态，并将关闭模式的决定传递给语义 UI 表单验证事件(即 onSuccess)。

所以类似这样的东西:

$('.ui.modal').modal({
        onApprove : function() {
          //Submits the semantic ui form
          //And pass the handling responsibilities to the form handlers,
          // e.g. on form validation success
          $('.ui.form').submit();
          //Return false as to not close modal dialog
          return false;
        }
    });

var formValidationRules =
{
    title: {
        identifier  : 'title',
        rules: [
            {
                type   : 'empty',
                prompt : 'Please enter a title'
            },
            {
                type   : 'length[2]',
                prompt : 'At least 6 characters'
            }
        ]
    }
}

var formSettings =
{
    onSuccess : function() 
    {
      //Hides modal on validation success
      alert("Valid Submission, modal will close.");
      $('.modal').modal('hide');
    }
}

$('.ui.form').form(formValidationRules, formSettings);

请注意，“OnApprove”事件仅在您单击类为“ok”的模式按钮时触发。 所以你需要一个像这样的模态按钮:

<div class="ui ok green basic inverted button">
  <i class="checkmark icon"></i>
  Submit
</div>

这是我创建的扩展工作插件代码来演示这一点: http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL?p=preview