带有语义 ui 的表单验证 + api 调用答案

【问题标题】：Form validation + api call with semantic ui带有语义 ui 的表单验证 + api 调用
【发布时间】：2017-06-26 17:47:08
【问题描述】：

我整天都在努力解决这个问题。

我有这个用于语义 ui 的 JS 代码。简单验证 + api (ajax) 调用。

$('.ui.form')
    .form({
        fields: {
            comment: {
                identifier: 'comment',
                rules     : [
                    {
                        type  : 'empty',
                        prompt: 'Please enter you comment.'
                    }
                ]
            }
        }
    });

$('.ui.form .submit.button')
    .api({
        action       : 'new lead comment',
        method       : 'POST',
        serializeForm: true,
        urlData      : {
            id: $('#lead_id').val()
        },
        onSuccess    : function(response) {
            alert('success');
            console.log(response);
        },
        onFailure    : function(response) {
            alert('failure');
            console.log(response);
        }
    });

问题是在（失败的）表单验证之后，API 被调用，这不应该发生。 .form 和 .api 都可以单独工作，但不能像这样在“团队”中工作。我知道一些解决方法（使用 beforeSend 进行 jquery $.ajax 调用），但我知道必须有一种“语义”的方式来做到这一点，否则有人将所有这些逻辑编码为一无所有:)

【问题讨论】：

标签： ajax semantic-ui

【解决方案1】：

为了将来参考（并且因为这部分中的语义 ui 文档不清楚），解决方案（这对我有用）是将 .form 和 .api 附加到语义 ui 表单元素上，如下所示：

$('.ui.form')
    .form({
        fields: {
            comment: {
                identifier: 'comment',
                rules     : [
                    {
                        type  : 'empty',
                        prompt: 'Please enter you comment.'
                    }
                ]
            }
        }
    })
    .api({
        action       : 'new lead comment',
        method       : 'POST',
        serializeForm: true,
        urlData      : {
            id: $('#lead_id').val()
        },
        onSuccess    : function(response) {
            alert('success');
            console.log(response);
        },
        onFailure    : function(response) {
            alert('failure');
            console.log(response);
        }
    });

【讨论】：

是的，我同意这真的很挑剔，试图让表单和 api 一起合作......这很糟糕，因为......就像人们真的仍然使用标准表单 POST？ AJAX 对我来说一路走来，不必要的时候愚蠢地重新加载整个页面！

【解决方案2】：

onSuccess 回调是你所需要的。

$('.ui.form')
.form({
    fields: {
        comment: {
            identifier: 'comment',
            rules     : [
                {
                    type  : 'empty',
                    prompt: 'Please enter you comment.'
                }
            ]
        }
    },onSuccess:function(event){
        event.preventDefault();
        alert('valid but not submitted');
        //you can use api or ajax call here
    }

});

【讨论】：