Ajax 表单验证&x2B；带有语义ui的api调用

我一整天都在搞这个

我有这个用于语义用户界面的JS代码。简单验证+api（ajax）调用

问题是在表单验证（失败）之后，调用API，而这不应该发生。.form和.api单独工作都很好，但在这样的“团队”中就不行了。我知道很少有解决方法（使用beforeSend来执行jquery$.ajax调用），但我知道必须有一种“语义”方法来实现这一点，否则有人会将所有这些逻辑编码为零：）

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

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

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

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

---

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
    }

});

---

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一起合作真的很挑剔。。。这很糟糕，因为。。。喜欢的人真的还用标准表单帖子吗？？我一路使用AJAX，愚蠢地在没有必要时重新加载整个页面！是的，我同意试图让表单和api一起合作真的很挑剔。。。这很糟糕，因为。。。喜欢的人真的还用标准表单帖子吗？？我一路使用AJAX，愚蠢地在没有必要时重新加载整个页面！