Using message with form and api


#1

I’ve got a form using api. The form contains a message div. I’m using the onSuccess and onFailure callbacks to display state messages to the user.

API automatically adds success or error classes to the form but not to the message div so I’m adding these manually. Then in the onBefore handler I’m removing them. I’m also adding the hidden class in onBefore and removing again onSuccess or Failure.

This all feels a but clunky and makes me think I’ve got it wrong. Is there a way for API to handle the visibility and error / success state for a message div contained with a form?

For clarity here’s my api method…

$('form').api({
        url: '/user/register',
        serializeForm: true,
        method: 'POST',
        beforeSend: function(settings) {

            $('form .ui.message').addClass('hidden');
            $('form .ui.message').removeClass('success error');

            settings.data.action = $('.submit').data('action');
            return settings;

        },
        onSuccess: function(response) {
            $('form .ui.submit').addClass('disabled');
            $('form .ui.message').removeClass('hidden');
            $('form .ui.message').addClass('success').text(response.msg);
        },
        onFailure: function(error) {
            $('form .ui.message').removeClass('hidden');
            $('form .ui.message').addClass('error').text(error.error);
        }
    });

#2

Any info, error, success, or warning message blocks found inside a form are hidden by default.

When the form state (class) changes (.error, .success, etc) then the relevant message is automatically visible.

http://semantic-ui.com/collections/form.html#success

so adding .error class to < form class=“ui form” >< /form > will make any < div class=“ui error message” >< /div > visible.