Jquery 提交前，请先侦听语义UI表单验证错误

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

阻止模式关闭的唯一方法是向submit按钮添加一个

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

不要使用disabled for submit，确保即使单击submit（modal approve）按钮，modal仍保持打开状态，并将关闭modal的决定传递给语义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工作代码来演示这一点：
您可以使用语义UI API来防止提交表单

$('.submit.button').api({
    beforeSend: function(settings) {
        return false;
    }
});

我也遇到过同样的问题，并联系了语义开发人员。请注意，在2.0发布之后，他们将重新访问一些额外的、明显的、缺失的表单行为。
现在，您可以在github repo（form.js文件）上查看该分支：

使用权宜之计函数
有效
，如果表单验证，该函数将返回
真/假

e、 g

这将出现在
2.0
中，@DruidKuma和@Oniisaki的解决方案组合为我工作：

var formValidationRules;

$(function() {
  return $('.ui.modal').modal({
     onApprove: function() {
       if ($('.ui.form').form('is valid')) {
       return true;
       } else {
       return false;
       }
     }
  });
});

formValidationRules = {
  fields: {
    name: 'empty'
  }
  // Additional validation fields would go here
};

$(function() {
  return $('.ui.form').form(formValidationRules);
});

要详细说明
onApprove
回调，请注意除了
.ok
（技术上是
.action.ok
类选择器）之外用@DruidKuma表示，
.action.positive
和
.action.approve
的附加类选择器也将触发
onApprove
，我知道这是一篇旧文章，现在事情可能已经改变了。以上所有解决方案都不适用于我，我在任何地方都找不到缺失的部分。这就是我最终成功的原因：

$("#myModal").modal({
    onApprove: function(e){
        $('#myModal .ui.form').submit();
        if (!$('#myModal .ui.form').form('is valid')) {
            return false;
        }

        // Process the form data

        return true;
    }
});

我希望它能帮助别人

$("#myModal").modal({
    onApprove: function(e){
        $('#myModal .ui.form').submit();
        if (!$('#myModal .ui.form').form('is valid')) {
            return false;
        }

        // Process the form data

        return true;
    }
});