Form validation + api call with semantic ui

Question

I've been banging my head on this one for the whole day.

I have this JS code for semantic ui. Simple validation + api (ajax) call.

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

The problem is that after (failed) form validation, API is called and that should not happen. Both .form and .api work great on their own but not in "team" like this. I am aware of few workarounds (using beforeSend to do jquery $.ajax call) but I know there HAS to be a "semantic" way of doing this otherwise someone coded all this logic for nothing :)

Answer 1

onSuccess callback is what you need.

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

});

Answer 2

For future reference (and because semantic ui docs are not clear in this part) the solution (that's working for me) is to attach .form and .api on the semantic ui form element like this:

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