Functions for showing form save messages and errors

form.html

<form id="coursera-form" action="/api/save" enctype="multipart/form-data" method="POST" class="form-horizontal">
      <!-- form inputs here -->

     <div class="form-actions"><button type="submit" data-default-message="Save Changes" data-inflight-message="Saving..." data-success-message="Saved!" class="coursera-save-button btn btn-primary" disabled="disabled">Saved!</button></div>

</form>

forms.js

  function setupFormSave($form, xhrOptions) {
    xhrOptions.url = xhrOptions.url || $form.attr('action');
    xhrOptions.type = xhrOptions.type || $form.attr('type');
    var $saveButton = $form.find('button[type="submit"]');

    function changeButtonText(message) {
      $saveButton.each(function() {
        $(this).html($(this).attr('data-' + message + '-message'));
      });
    }

    function resetButton() {
      $saveButton.removeAttr('disabled');
      changeButtonText('default');
    }

    function sendXHR() {
      $.ajax({
        url: xhrOptions.url,
        type: xhrOptions.type || 'POST',
        data: xhrOptions.data || $form.serialize() || null,
        headers: xhrOptions.headers || {},
        dataType: xhrOptions.dataType || 'json',
        success: function(responseJSON, textStatus, xhr) {
          if (xhrOptions.success) {
            xhrOptions.success(responseJSON);
          }
          changeButtonText('success');
          $form.find('.form-errors').remove();
        },
        error: function(xhr, textStatus, errorThrown) {
          if (xhrOptions.error) {
            xhrOptions.error(errorThrown);
          }
          resetButton();
          renderErrors($form, data.errors);
        }
      });
    }

    $saveButton.on('click', function(event) {
      event.preventDefault();
      changeButtonText('inflight');
      $saveButton.attr('disabled', 'disabled');
      sendXHR(xhrOptions);
    });

    handleFormChange($form, resetButton);
  }

  function handleFormChange($form, callback) {
    $form.find('input, select').on('change', callback);
    $form.find('input, textarea').on('keyup', callback);
    $form.on('reset-button', callback);
  }

  function renderErrors($form, errors) {
    var $errorsDom;

    $form.find('.form-errors').remove();
    $form.find('.error .help-inline').remove();
    $form.find('.error').removeClass('error');

    if (typeof errors == 'string') {
      $errorsDom = $('<span class="form-errors">' + errors + '</span>');
      if ($form.find('.actions').length) {
        $form.find('.actions').children(':last').after($errorsDom);
      } else if ($form.find('.modal-footer').length) {
        $form.find('.modal-footer').children(':last').after($errorsDom);
      } else if ($form.find('button[type="submit"]')) {
        $form.find('button[type="submit"]').after($errorsDom);
      }
      return;
    }

    for (var fieldName in errors) {
      var fieldErrors = errors[fieldName];
      $errorsDom = $('<span class="help-inline"></span>');
      for (var i = 0; i < fieldErrors.length; i++) {
        $errorsDom.append('<span>' + fieldError + '</span>');
      }
      $form.find('*[name="' + fieldName + '"]').parent().parent().addClass('error');
      $form.find('*[name="' + fieldName + '"]').after($errorsDom);
    }
  }