在提交之前听取语义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>

这是我为了证明这一点而创建的扩展工作plunker代码:http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL？p = preview

Answer 2

我遇到了同样的问题,并与语义开发人员联系.请注意,他们将在2.0发布后重新审视一些额外的,明显的,缺失的表单行为.现在你可以在他们的github repo(form.js文件)上查看这个分支:https: //github.com/Semantic-Org/Semantic-UI/tree/next

使用一个stopgap函数is valid,true/false如果表单验证则返回该函数.

例如

if ( $('form').form('is valid') ) {
  // do something
}

这将是 2.0