提交前收听语义 UI 表单验证错误

Question

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

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

我想（实时）收听表单并根据当前表单验证状态打开和关闭 disabled class。

我只能在提交表单后才能让它工作，但不是实时的

$('#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" 事件仅在您单击带有 class "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

您可以使用语义 UI API 来防止提交表单。

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

Answer 3

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

使用权宜之计 is valid 如果表单有效，returns true/false。

例如

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

这将在 2.0

Answer 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 class 选择器之外，还有其他 class .action .positive 和 .action .approve 的选择器也会触发 onApprove.

Answer 5

我知道这是旧的 post，现在情况可能已经改变了。 None 以上解决方案对我来说都是有效的，但我在任何地方都找不到缺失的部分。这就是我最终实现它的方式：

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

        // Process the form data

        return true;
    }
});

希望对大家有所帮助。

提交前收听语义 UI 表单验证错误

Listen to Semantic UI form validation errors before submit

forms

validation

jquery

modal-dialog

semantic-ui