在提交之前收听语义 UI 表单验证错误答案

【问题标题】：Listen to Semantic UI form validation errors before submit在提交之前收听语义 UI 表单验证错误
【发布时间】：2015-05-04 15:01:29
【问题描述】：

使用语义 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');
        }
    }
);

【问题讨论】：

标签： jquery forms validation modal-dialog semantic-ui

【解决方案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

【讨论】：

【解决方案2】：

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

使用权宜之计函数is valid，如果表单验证返回true/false。

例如

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

这将在2.0

【讨论】：

【解决方案3】：

您可以使用 Semantic UI API 来阻止提交表单。

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

【讨论】：

【解决方案4】：

@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 回调，请注意，除了 @DruidKuma 表示的 .ok（技术上为 .action .ok 类选择器）之外，.action .positive 和 .action .approve 的其他类选择器也将触发 @987654327 @。

【讨论】：

【解决方案5】：

我知道这是一篇旧帖子，现在情况可能已经改变。以上解决方案都不适合我，而且我在任何地方都找不到丢失的部分。这就是我最终得到它的方式：

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

        // Process the form data

        return true;
    }
});

我希望它对某人有所帮助。

【讨论】：