Semantic UI onSuccess, onFailure callbacks not being fired upon form validation

Question

In the following code which validates that username has a value and that the passwords match, neither the onSuccess nor the onFailure callback is ever fired even though the validation rules are being executed/enforced. I've tested every other part of this independently and this layout follows the documentation exactly, so I've ruled out syntax errors. In addition to the syntax used below, I also tried the format of $().form().onSuccess().onFailure() but got an "Uncaught TypeError: onSuccess is not a function". Fiddle here: Semantic UI onSuccess, onFailure callback example.

$(function(){
    $('#main')
        .form({
            on: 'blur',
            fields: {
                username: {
                    identifier : 'username',
                    rules: [
                        {
                            type : 'empty'
                        }
                    ]
                },
                password1: {
                    identifier  : 'password1',
                    rules: [
                        {
                            type   : 'match[password2]',
                            prompt : 'Please enter the same value in both fields'
                        }
                    ]
                },
                password2: {
                    identifier  : 'password2',
                    rules: [
                        {
                            type   : 'match[password1]',
                            prompt : 'Please enter the same value in both fields'
                        }
                    ]
                }
            },
            onSuccess: function() {
                $(".ui.button[name='account']").removeClass('disabled');
                console.log('Success');
            },
            onFailure: function() {
                $(".ui.button[name='account']").addClass('disabled');
                console.log('Failure');
            }
        }
    );
});

Answer 1

The key is to call it this way. $('#main').form(fieldRules, settings); onFailure and onSuccess are registered in settings.

Have a look of revised code:

    $(function(){
        $('#main')
            .form({
                    username: {
                        identifier : 'username',
                        rules: [
                            {
                                type : 'empty'
                            }
                        ]
                    },
                    password1: {
                        identifier  : 'password1',
                        rules: [
                                {
                                    type: 'empty',
                              prompt: 'Please enter the password'
                                },
                            {
                                type   : 'match[password2]',
                                prompt : 'Please enter the same value in both fields'
                            }
                        ]
                    },
                    password2: {
                        identifier  : 'password2',
                        rules: [
                            {
                                type   : 'match[password1]',
                                prompt : 'Please enter the same value in both fields'
                            }
                        ]
                    }
                }, {
                    on: 'blur',
                  inline: true,
                  onSuccess: function() {
                    alert('Success');
                    return false; // false is required if you do don't want to let it submit

                    },
                    onFailure: function() {
                    alert('Failure');
                    return false; // false is required if you do don't want to let it submit                                            
                    }
                  });
    });