django-formset, Release 0.13.4
invalid form data submitted via JSON can as well be interpreted as “semantically erroneous”.
• In scrollToError the browser scrolls to the first field, which was marked to contain invalid input data.
The above 4 functions are the most useful ones, but there are many more functions to be used as queued actions for
buttons in django-formset:
• enable is used to re-enable a previously disabled button. By default, every button is put into the state just before
having clicked on it, regardless if the submission was successful or not. Therefore this action is rarely of usage.
• reset is used to reset all form fields to their state when loading the form. It usually should be used on a separate
button which explicitly is labeled to reset the form.
• reload this is used to reload the page. Useful to reload the form after a successful submission, for instance in
buttons labeled “Save and continue editing”.
• delay(1000) delays all further actions by one second. This sometimes can be useful to add an extra delay (in
milliseconds) during the submission.
• spinner if the button contains a decorator element, ie. a child with class="dj-button-decorator", then that
element is replaced by a rotating spinner symbol. Useful to give feedback before time consuming submissions.
• okay if the button contains a decorator element, ie. a child with class="dj-button-decorator", then that
element is replaced by an animated okay tick. Useful to give feedback after a successful form submission. This
action takes an optional delay argument in milliseconds, in order to visualize the animation before proceeding.
• bummer if the button contains a decorator element, ie. a child with class="dj-button-decorator", then that
element is replaced by an animated bummer symbol. Useful to give feedback after a failed form submission. This
action takes an optional delay argument in milliseconds, in order to visualize the animation before proceeding.
• addClass("foo") adds the CSS class “foo” to the button class. After submission, this class is automatically
removed from the class.
• removeClass("foo") removes the CSS class “foo” to the button class.
• toggleClass("foo") toggles the CSS class “foo” on the button class.
• confirm("A question?") opens a confirmation popup with the given message string together with a “Cancel”
and an “OK” button. If the user clicks on “Cancel”, the action chain is interrupted. This action typically precedes
the submit-action to prompt the user for confirmation.
• alertOnError typically is added after the !~ operator. In case the form submission generated an non-form-
validation error, for instance “permission denied”, this error is shown in an alert box.
• emit("event name") emit a named event to the DOM.
• intercept intercepts the response object after submission and prints it onto the console. This is only useful for
debugging purposes.
• clearErrors clears all error annotations from a previously failed form validation.
• noop does nothing and can be used as a placeholder.
By combining these button actions, we gain a huge set of possibilities to improve the user experience. If for instance,
form processing takes more than say one second, we shall somehow signal to the user that the submission might take
some time. This is where the spinner action renders a spinning wheel. After a successful submission, we might want
to signalize to the user that everything is okay, before proceeding to the next page without notification. This is where
the okay action displays an animated tick. In case of an unsuccessful submission attempt, we might want to signalize
to the user that it failed. This is where the bummer action displays an animated failure.
This is an example of a click action on a button for a form requiring some processing time:
26 Chapter 6. Submit Button Controls