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）。

类似于此：

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

请注意＆＃34; OnApprove＆＃34;当您单击带有＆＃34; ok＆＃34;类的模态按钮时，事件才会触发。所以你需要一个像这样的模态按钮：

 {
"error": false,
"entry_log": [651],
    {
        "id": 2073,
        "hit": 2,
        "amount": 3,
        "pieces": 2,
        "user_email": "xxxxx",
        "log_time": "2015-05-07 13:05:21"
    },
    {
        "id": 2069,
        "hit": 1,
        "amount": 3,
        "pieces": 4,
        "user_email": "xxxxx",
        "log_time": "2015-05-07 12:05:25"
    },
    {
        "id": 2065,
        "hit": 0,
        "amount": 0,
        "pieces": 0,
        "user_email": "xxxxx",
        "log_time": "2015-05-06 09:05:38"
    },


        .
        . (repeated sequence with the same or different log_time)
        .
    }

这是我创建的扩展工作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

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

e.g。

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

这将在2.0

中

Answer 3

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

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

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

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

我希望它有所帮助。

在提交之前听取语义UI表单验证错误

5 个答案: