jquery – 在提交之前收听Semantic UI表单验证错误

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

而不是使用禁用提交,确保模式保持打开,即使单击提交(模态批准)按钮,并将决定关闭模式传递到语义UI表单验证事件(即onsuccess). @H_403_7@

@H_403_7@所以类似的东西：

@H_403_7@

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

@H_403_7@请注意,“OnApprove”事件仅在您单击“ok”类的模式按钮时触发.
所以你需要一个模态按钮,如下所示：

@H_403_7@

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

@H_403_7@这是我创建的扩展工作plunker代码,用于演示：
http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL?p=preview