Question

我一整天都在敲打这个。

我有这个用于语义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都可以自己运行，但不会在＆＃34; team＆＃34;像这样。我知道几个解决方法（使用beforeSend来执行jquery $ .ajax调用），但我知道有一个＆＃34;语义＆＃34;这样做的方式，否则有人将所有这些逻辑编码为无效：）

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

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
    }

});

使用语义ui进行表单验证+ api调用

2 个答案: