表单验证 + api 语义调用 ui

Question

我一整天都在为这个问题苦思冥想。

我有这个 JS 语义代码 ui。简单验证 + 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 单独使用都很好，但在 "team" 中就不行了。我知道很少有解决方法（使用 beforeSend 来执行 jquery $.ajax 调用）但我知道必须有一种 "semantic" 方法来执行此操作，否则有人会白白编写所有这些逻辑:)

Answer 1

为了将来参考（并且因为语义 ui 文档在这部分中不清楚）解决方案（对我有用）是在语义 [= 上附加 .form 和 .api 14=] 这样的表单元素：

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

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

});

表单验证 + api 语义调用 ui

Form validation + api call with semantic ui

ajax

semantic-ui