From dca1a72326fff53611b3ea2fd1f7081a3a2fbe68 Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 16:55:21 -0400
Subject: [PATCH 01/11] Add tariffs from the meter form via a modal

Extract the tariff form fields into a shared partial included by both the
standalone tariff page and a new modal-only template.

Add GET|POST /tariff/add-modal, guarded by the tariff:add permission. GET
returns the form fragment with no page chrome. A valid POST creates the
tariff and returns its id and name as JSON; an invalid POST returns 400 and
re-renders the fragment with inline field errors.

On the customer meter form, the tariff select starts blank and carries an
<Add New> option that loads the modal form, submits it, and inserts the
created tariff into the dropdown.
---
 sparkmeter/meter/meterform.py                 |   8 +-
 sparkmeter/meter/templates/meter-form.html    | 198 ++++++++-
 sparkmeter/tariff/tariffview.py               |  30 ++
 sparkmeter/tariff/templates/tariff-form.html  | 221 +---------
 .../tariff/templates/tariff-modal-form.html   |  54 +++
 .../templates/tariff/_tariff-form-fields.html | 204 +++++++++
 sparkmeter/tariff/tests/test_tariffviews.py   |  46 ++
 ...est_meterviews-MeterViewTest.test_add.page | 189 +++++++-
 ...-MeterViewTest.test_add_32_bit_serial.page | 189 +++++++-
 ...erViewTest.test_add_duplicated_serial.page | 192 ++++++++-
 ...rViewTest.test_add_empty_country_code.page | 197 ++++++++-
 ...rViewTest.test_add_empty_phone_number.page | 197 ++++++++-
 ...ews-MeterViewTest.test_add_from_cloud.page | 189 +++++++-
 ...iewTest.test_add_invalid_phone_number.page | 197 ++++++++-
 ...est_add_invalid_serial-invalid-serial.page | 192 ++++++++-
 ...MeterViewTest.test_add_invalid_serial.page | 197 ++++++++-
 ...iews-MeterViewTest.test_add_totalizer.page |   2 +
 ...iewTest.test_add_totalizer_from_cloud.page |   2 +
 ...-MeterViewTest.test_add_unknown_model.page | 192 ++++++++-
 ...omer_state_cloud-customer-state-cloud.page | 191 ++++++++-
 ...er_state_ground-customer-state-ground.page | 191 ++++++++-
 ...er_tariff_cloud-customer-tariff-cloud.page | 191 ++++++++-
 ...ews-MeterViewTest.test_edit_totalizer.page |   4 +-
 ...wTest.test_edit_with_tags-prepopulate.page | 191 ++++++++-
 ...ews-MeterViewTest.test_edit_with_tags.page | 191 ++++++++-
 ...terViewTest.test_unknown_server_error.page |   5 +
 ...t_tariffviews-TariffViewTest.test_add.page | 318 +++++++-------
 ...ffViewTest.test_add_form_int_outrange.page | 318 +++++++-------
 ...ews-TariffViewTest.test_add_modal_get.page | 403 ++++++++++++++++++
 ...Test.test_add_with_invalid_blockrates.page | 318 +++++++-------
 ...ffViewTest.test_add_with_invalid_tous.page | 318 +++++++-------
 ...st.test_edit-edit-negative-post-error.page | 318 +++++++-------
 ...iffViewTest.test_edit-edit-post-error.page | 318 +++++++-------
 ..._tariffviews-TariffViewTest.test_edit.page | 316 +++++++-------
 ...s-TariffViewTest.test_error_blockrate.page | 318 +++++++-------
 ...iffViewTest.test_error_duplicate_name.page | 316 +++++++-------
 ...-TariffViewTest.test_error_empty_name.page | 316 +++++++-------
 ...fViewTest.test_error_enter_load_limit.page | 318 +++++++-------
 ...t.test_error_enter_monthly_plan_price.page | 318 +++++++-------
 ...t.test_error_existing_duplicate_names.page | 316 +++++++-------
 ...s-TariffViewTest.test_error_flat_rate.page | 318 +++++++-------
 ...ViewTest.test_error_low_balance_empty.page | 320 +++++++-------
 ...wTest.test_error_low_balance_negative.page | 320 +++++++-------
 ...iewTest.test_error_negative_flat_rate.page | 318 +++++++-------
 ...ewTest.test_error_negative_load_limit.page | 318 +++++++-------
 ...t.test_error_no_scheduled_load_limits.page | 320 +++++++-------
 ...fviews-TariffViewTest.test_error_tous.page | 320 +++++++-------
 47 files changed, 7212 insertions(+), 3211 deletions(-)
 create mode 100644 sparkmeter/tariff/templates/tariff-modal-form.html
 create mode 100644 sparkmeter/tariff/templates/tariff/_tariff-form-fields.html
 create mode 100644 test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page

diff --git a/sparkmeter/meter/meterform.py b/sparkmeter/meter/meterform.py
index 666bc54..69e2dba 100644
--- a/sparkmeter/meter/meterform.py
+++ b/sparkmeter/meter/meterform.py
@@ -82,7 +82,8 @@ class BaseMeterForm(BaseForm):
         _("Tariff"),
         query_factory=lambda: Tariff.query.filter().order_by("name"),
         get_label="name",
-        allow_blank=False,
+        allow_blank=True,
+        blank_text=_("Select a tariff"),
     )
     customer_name = StringField(_("Name"), default="new customer")
     customer_code = StringField(_("Code"))
@@ -151,6 +152,11 @@ def validate_customer_national_number(self, field):
                 )
             )
 
+    def validate_tariff(self, field):
+        """Require a tariff for customer meters with a clear validation message."""
+        if self.meter_type == Meter.TYPE_CUSTOMER and field.data is None:
+            raise ValidationError(_("Please select a tariff or add a new one."))
+
     def save(self, view):
         """Save content of meter form to database."""
         if self.meter_type == Meter.TYPE_CUSTOMER and self.customer_national_number.data:
diff --git a/sparkmeter/meter/templates/meter-form.html b/sparkmeter/meter/templates/meter-form.html
index c5644ec..eee51f4 100644
--- a/sparkmeter/meter/templates/meter-form.html
+++ b/sparkmeter/meter/templates/meter-form.html
@@ -15,6 +15,193 @@
 {%- if form.mode == 'edit' -%}
 {% block subtitle %}{{ _('Edit') }}{% endblock %}
 {%- endif -%}
+{% block scripts %}
+  {{ super() }}
+  {% if meter_type == 'customer' %}
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '{{ url_for("tariff.add_modal") }}';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">{{ _("Add a New Tariff") }}</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>{{ _("Loading tariff form...") }}</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">{{ _("Cancel") }}</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">{{ _("Save") }}</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('{{ _("Could not load the tariff form.") }}', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || '{{ _("Tariff created.") }}', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('{{ _("Could not save the tariff.") }}', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
+  {% endif %}
+{% endblock scripts %}
 
 {% block breadcrumbs %}
     {% call breadcrumb(role='operator', url=url_for('ground.index')) %}
@@ -47,6 +234,12 @@
             {% call render_box(title, box_content_class=box_content_class) %}
                 <form class="form form-horizontal" role="form" method="POST">
                     {{- form.hidden_tag() -}}
+                    {{ form_errors(form, hiddens='only') }}
+                    {% if form.errors %}
+                    <div class="alert alert-danger">
+                      {{ _('Please correct the highlighted fields and try again.') }}
+                    </div>
+                    {% endif %}
                     {%- if form.mode == 'add' -%}
                     {{ addon_form_field(form.serial, form_type="horizontal", horizontal_columns=('lg', 2, 10)) }}
                     {%- endif -%}
@@ -58,12 +251,15 @@
                     </div>
 
                     {%- if meter_type == 'customer' -%}
-                    <div class="form-group">
+                    <div class="form-group{% if form.tariff.errors %} has-error{% endif %}">
                       {{ form.tariff.label(class="control-label col-lg-2") }}
                       <div class="input-group col-lg-10">
                         {{ form.tariff(class="form-control") }}
                       </div>
                     </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      {{ form_error(form.tariff) }}
+                    </div>
                     {%- endif -%}
 
                     <div class="form-group">
diff --git a/sparkmeter/tariff/tariffview.py b/sparkmeter/tariff/tariffview.py
index 797cf59..d452573 100644
--- a/sparkmeter/tariff/tariffview.py
+++ b/sparkmeter/tariff/tariffview.py
@@ -9,12 +9,14 @@
 from flask.globals import request
 from flask.helpers import flash, url_for
 from flask.templating import render_template
+from flask.wrappers import Response
 from flask_babel import lazy_gettext as _
 from markupsafe import Markup
 from werkzeug.exceptions import abort
 from werkzeug.utils import redirect
 
 from sparkmeter.misc.htmlutils import build_link
+from sparkmeter.misc.jsonutils import json_dumps, jsonify
 from sparkmeter.tariff.tariffdomain import Tariff
 from sparkmeter.tariff.tariffform import TariffForm
 from sparkmeter.tariff.tariffutils import add_tariff_from_form, update_tariff_from_form
@@ -25,6 +27,15 @@
 tariff = AuthBlueprint("tariff", __name__)
 
 
+def render_modal_form(form, status=200):
+    """Render the tariff modal form with optional validation metadata."""
+    body = render_template("tariff-modal-form.html", form=form)
+    response = Response(body, status=status)
+    if form.errors:
+        response.headers["X-Form-Errors"] = json_dumps(form.errors)
+    return response
+
+
 @tariff.route("/tariff/")
 @verify_permission("tariff", "view")
 def index():
@@ -60,6 +71,25 @@ def add():
     return form.render(mode="add")
 
 
+@tariff.route("/tariff/add-modal", methods=["GET", "POST"])
+@verify_permission("tariff", "add")
+def add_modal():
+    """Add tariff form rendered for the meter modal workflow."""
+    form = TariffForm(request.form if request.method == "POST" else None)
+    if request.method == "POST":
+        tariff = add_tariff_from_form(form)
+        if tariff:
+            return jsonify(
+                message=_("Tariff created."),
+                tariff={
+                    "id": tariff.id,
+                    "name": tariff.name,
+                },
+            )
+        return render_modal_form(form, status=http.client.BAD_REQUEST)
+    return render_modal_form(form)
+
+
 @tariff.route("/tariff/<uuid:tariff_id>/edit", methods=["GET", "POST"])
 @verify_permission("tariff", "edit")
 def edit(tariff_id):
diff --git a/sparkmeter/tariff/templates/tariff-form.html b/sparkmeter/tariff/templates/tariff-form.html
index 7bff1d7..bd24f0c 100644
--- a/sparkmeter/tariff/templates/tariff-form.html
+++ b/sparkmeter/tariff/templates/tariff-form.html
@@ -51,230 +51,11 @@
 {% endmacro %}
 
 {% block content %}
-  <div id="tariff-form-params"
-       data-blockrates="{{ form.data.blockrates|tojson|forceescape }}"
-       data-blockrates-title="{{ _('Edit block rate')|tojson|forceescape }}"
-       data-tous="{{ form.data.tous|tojson|forceescape }}"
-       data-tous-title="{{ _('Edit time of use')|tojson|forceescape }}"
-       data-load-limits="{{ form.data.load_limits|tojson|forceescape }}"
-       data-load-limits-title="{{ _('Edit scheduled load limits of use')|tojson|forceescape }}">
-  </div>
   <div class="row">
     <div class="col-md-12">
       {% call render_box(title, box_content_class="padded") %}
       <form class="form form-horizontal tariff" method="POST">
-        {{ form.hidden_tag() }}
-
-        {#- Tariff.name|e #}
-        <div class="form-group" title="{{ form.name.description }}">
-          {{ form.name.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.name(class_="form-control") }}
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'name') }}
-
-        {# tariff plan duration and start day #}
-        <div class="form-group cycle-start-day-of-month"
-             title="{{ form.plan_duration_and_start_day.description }}">
-          {{ form.plan_duration_and_start_day.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.plan_duration_and_start_day(class_="form-control numeric no-negative") }}
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'cycle_start_day_of_month', class_='form-group cycle-start-day-of-month') }}
-
-        {#- radio for load limit type, active depending on form data #}
-        <div class="form-group">
-          {{ form.load_limit_type.label(class_="control-label col-lg-2") }}
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary{{ ' active' if form.data.load_limit_type == "flat" }}">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat"{{ ' checked' if form.data.load_limit_type == "flat" }}>{{ _('Flat') }}
-            </label>
-            <label class="btn btn-primary{{ ' active' if form.data.load_limit_type == "scheduled" }}">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled"{{ ' checked' if form.data.load_limit_type == "scheduled" }}>{{ _('Scheduled') }}
-            </label>
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'load_limit_type') }}
-
-        {#- flat load limit text input, only visible when radio is active #}
-        <div class="form-group load_limit_type flat{{ ' hide' if form.data.load_limit_type != "flat" }}">
-          {{ form.flat_load_limit.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.flat_load_limit(class_="form-control numeric no-negative") }}
-            <span class="input-group-addon">{{ _('in watts', currency=config.CURRENCY) }}</span>
-          </div>
-        </div>
-        {% set extra = '' %}
-        {% if form.data.load_limit_type != 'flat' %}
-        {% set extra = ' hide' %}
-        {% endif %}
-        {{ form_tariff_error(form, 'flat_load_limit', class_='form-group load_limit_type' + extra) }}
-
-        {#- scheduled load limit text input, only visible when radio is active #}
-        <div class="form-group load_limit_type scheduled{{ ' hide' if form.data.load_limit_type != 'scheduled' }}">
-          <label class="control-label col-lg-2">{{ _('Load Limit Periods') }}</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
-            {% include "tariff-load-limits-list.html" %}
-          </div>
-        </div>
-        {% set extra = '' %}
-        {% if form.data.load_limit_type != 'scheduled' %}
-        {% set extra = ' hide' %}
-        {% endif %}
-        {{ form_tariff_error(form, 'load_limits', class_='form-group load-limits' + extra) }}
-
-        {#- Low balance threshold #}
-        <div class="form-group" title="{{ form.low_balance_threshold.description }}">
-          {{ form.low_balance_threshold.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.low_balance_threshold(class_="form-control numeric") }}
-            <span class="input-group-addon">{{ _('in %(currency)s', currency=config.CURRENCY) }}</span>
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'low_balance_threshold') }}
-
-        {#- Monthly Plan, checkbox/iButton for enabling it #}
-        <div class="form-group" title="{{ form.plan_enabled.description }}">
-          {{ form.plan_enabled.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton{{ ' active' if form.data.plan_enabled }}">
-                {{ form.plan_enabled() }}
-              </label>
-            </div>
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'plan_enabled') }}
-
-        {# Hide some fields when plan is disabled #}
-        {% set extra = '' %}
-        {% if not form.data.plan_enabled %}
-        {% set extra = ' hide' %}
-        {% endif %}
-
-        <div class="form-group plan-fixed-fee{{ extra }}"
-             title="{{ form.plan_fixed_fee.description }}">
-          {{ form.plan_fixed_fee.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.plan_fixed_fee(class_="form-control numeric no-negative") }}
-            <span class="input-group-addon">{{ _('in %(currency)s', currency=config.CURRENCY) }}</span>
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'plan_fixed_fee', class_='form-group plan-fixed-fee' + extra) }}
-
-        <div class="form-group plan-price{{ extra }}"
-             title="{{ form.plan_price.description }}">
-          {{ form.plan_price.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.plan_price(class_="form-control numeric no-negative") }}
-            <span class="input-group-addon">{{ _('in %(currency)s', currency=config.CURRENCY) }}</span>
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'plan_price', class_='form-group plan-price' + extra) }}
-
-
-        {#- radio for tariff type, active depending on form data #}
-        <div class="form-group">
-          {{ form.tariff_type.label(class_="control-label col-lg-2") }}
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary{{ ' active' if form.data.tariff_type == "flat" }}">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat"{{ ' checked' if form.data.tariff_type == "flat" }}>{{ _('Flat') }}
-            </label>
-            <label class="btn btn-primary{{ ' active' if form.data.tariff_type == "blockrate" }}">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate"{{ ' checked' if form.data.tariff_type == "blockrate" }}>{{ _('Block rate') }}
-            </label>
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'tariff_type') }}
-
-        {#- flat price text input, only visible when radio is active #}
-        <div class="form-group tariff_type flat{{ ' hide' if form.data.tariff_type != "flat" }}">
-          {{ form.flat_price.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.flat_price(class_="form-control numeric no-negative") }}
-            <span class="input-group-addon">{{ _('in %(currency)s per kWh', currency=config.CURRENCY) }}</span>
-          </div>
-        </div>
-        {% set extra = '' %}
-        {% if form.data.tariff_type != 'flat' %}
-        {% set extra = ' hide' %}
-        {% endif %}
-        {{ form_tariff_error(form, 'flat_price', class_='form-group tariff_type' + extra) }}
-
-        {#- blockrate table, only visible when radio is active #}
-        <div class="form-group tariff_type blockrate{{ ' hide' if form.data.tariff_type != "blockrate" }}">
-          <label class="control-label col-lg-2">{{ _('Block rates') }}</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
-            {% include "tariff-blockrate-list.html" %}
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'blockrates') }}
-
-        {#- time of use, checkbox/iButton for enabling it #}
-        <div class="form-group">
-          {{ form.tou_enabled.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton{{ ' active' if form.data.tou_enabled }}">
-                {{ form.tou_enabled }}
-              </label>
-            </div>
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'tou_enabled') }}
-
-        <div class="form-group tou{{ ' hide' if not form.data.tou_enabled }}">
-          <label class="control-label col-lg-2">{{ _('TOU Periods') }}</label>
-          <div class="col-md-5" data-box="tariff-tous">
-            {% include "tariff-tou-list.html" %}
-          </div>
-        </div>
-        {% set extra = '' %}
-        {% if not form.data.tou_enabled %}
-        {% set extra = ' hide' %}
-        {% endif %}
-        {{ form_tariff_error(form, 'tous', class_='form-group tou' + extra) }}
-
-        {#- daily energy limit, checkbox/iButton for enabling it #}
-        <div class="form-group">
-          {{ form.daily_energy_limit_enabled.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton{{ ' active' if form.data.daily_energy_limit_enabled }}">
-                {{ form.daily_energy_limit_enabled }}
-              </label>
-            </div>
-          </div>
-        </div>
-        {{ form_tariff_error(form, 'daily_energy_limit_enabled') }}
-
-        {# daily energy limit reset hour #}
-        <div class="form-group daily-energy-limit-reset-hour{{ ' hide' if not form.data.daily_energy_limit_enabled }}"
-             title="{{ form.daily_energy_limit_reset_hour.description }}">
-          {{ form.daily_energy_limit_reset_hour.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.daily_energy_limit_reset_hour(class_="form-control") }}
-          </div>
-        </div>
-
-        {% if form.data.daily_energy_limit_enabled -%}
-        {{ form_tariff_error(form, 'daily_energy_limit_reset_hour', class_='form-group daily-energy-limit-reset-hour') }}
-        {%- endif %}
-
-        {# daily energy limit value #}
-        <div class="form-group daily-energy-limit-value{{ ' hide' if not form.data.daily_energy_limit_enabled }}"
-             title="{{ form.daily_energy_limit_value.description }}">
-          {{ form.daily_energy_limit_value.label(class_="control-label col-lg-2") }}
-          <div class="input-group col-lg-3">
-            {{ form.daily_energy_limit_value(class_="form-control numeric no-negative") }}
-            <span class="input-group-addon">{{ _('in kWh') }}</span>
-          </div>
-        </div>
-        {% if form.data.daily_energy_limit_enabled -%}
-        {{ form_tariff_error(form, 'daily_energy_limit_value', class_='form-group daily-energy-limit-reset-value') }}
-        {%- endif %}
+        {% include "tariff/_tariff-form-fields.html" %}
 
         {#- Save #}
         <div class="form-group">
diff --git a/sparkmeter/tariff/templates/tariff-modal-form.html b/sparkmeter/tariff/templates/tariff-modal-form.html
new file mode 100644
index 0000000..b71fb1e
--- /dev/null
+++ b/sparkmeter/tariff/templates/tariff-modal-form.html
@@ -0,0 +1,54 @@
+{%- from "_macros.html" import form_errors -%}
+
+{% macro form_tariff_error(form, field, class_=None) %}
+  {% if form.errors[field] %}
+  <div class="form-group{{ ' %s'|format(class_) if class_ }}" style="padding-left: 20px; margin-top: -10px">
+    <span class="col-lg-offset-2 help-block note">
+    <i class="icon-warning-sign"></i>
+    {% for error in form.errors[field] %}
+      {{ error }}
+    {% endfor %}
+    </span>
+  </div>
+  {% endif %}
+{% endmacro %}
+
+<style>
+  #meter-tariff-modal .modal-dialog {
+    width: 900px;
+    max-width: calc(100vw - 40px);
+  }
+
+  #meter-tariff-modal .control-label.col-lg-2 {
+    width: 18%;
+  }
+
+  #meter-tariff-modal .input-group.col-lg-3,
+  #meter-tariff-modal .col-md-5 {
+    width: 52%;
+  }
+
+  #meter-tariff-modal .input-group.col-lg-10,
+  #meter-tariff-modal .btn-group.col-lg-10 {
+    width: 70%;
+  }
+
+  #meter-tariff-modal .input-group .form-control {
+    min-width: 0;
+  }
+
+  @media (max-width: 991px) {
+    #meter-tariff-modal .control-label.col-lg-2,
+    #meter-tariff-modal .input-group.col-lg-3,
+    #meter-tariff-modal .input-group.col-lg-10,
+    #meter-tariff-modal .btn-group.col-lg-10,
+    #meter-tariff-modal .col-md-5 {
+      width: 100%;
+    }
+  }
+</style>
+
+<form class="form form-horizontal tariff" id="tariff-modal-form" method="POST" action="{{ url_for('tariff.add_modal') }}">
+  {{ form_errors(form, hiddens='only') }}
+  {% include "tariff/_tariff-form-fields.html" %}
+</form>
diff --git a/sparkmeter/tariff/templates/tariff/_tariff-form-fields.html b/sparkmeter/tariff/templates/tariff/_tariff-form-fields.html
new file mode 100644
index 0000000..1fdd3d6
--- /dev/null
+++ b/sparkmeter/tariff/templates/tariff/_tariff-form-fields.html
@@ -0,0 +1,204 @@
+<div id="tariff-form-params"
+     data-blockrates="{{ form.data.blockrates|tojson|forceescape }}"
+     data-blockrates-title="{{ _('Edit block rate')|tojson|forceescape }}"
+     data-tous="{{ form.data.tous|tojson|forceescape }}"
+     data-tous-title="{{ _('Edit time of use')|tojson|forceescape }}"
+     data-load-limits="{{ form.data.load_limits|tojson|forceescape }}"
+     data-load-limits-title="{{ _('Edit scheduled load limits of use')|tojson|forceescape }}">
+</div>
+
+{{ form.hidden_tag() }}
+
+<div class="form-group" title="{{ form.name.description }}">
+  {{ form.name.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.name(class_="form-control") }}
+  </div>
+</div>
+{{ form_tariff_error(form, 'name') }}
+
+<div class="form-group cycle-start-day-of-month"
+     title="{{ form.plan_duration_and_start_day.description }}">
+  {{ form.plan_duration_and_start_day.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.plan_duration_and_start_day(class_="form-control numeric no-negative") }}
+  </div>
+</div>
+{{ form_tariff_error(form, 'cycle_start_day_of_month', class_='form-group cycle-start-day-of-month') }}
+
+<div class="form-group">
+  {{ form.load_limit_type.label(class_="control-label col-lg-2") }}
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary{{ ' active' if form.data.load_limit_type == "flat" }}">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat"{{ ' checked' if form.data.load_limit_type == "flat" }}>{{ _('Flat') }}
+    </label>
+    <label class="btn btn-primary{{ ' active' if form.data.load_limit_type == "scheduled" }}">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled"{{ ' checked' if form.data.load_limit_type == "scheduled" }}>{{ _('Scheduled') }}
+    </label>
+  </div>
+</div>
+{{ form_tariff_error(form, 'load_limit_type') }}
+
+<div class="form-group load_limit_type flat{{ ' hide' if form.data.load_limit_type != "flat" }}">
+  {{ form.flat_load_limit.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.flat_load_limit(class_="form-control numeric no-negative") }}
+    <span class="input-group-addon">{{ _('in watts', currency=config.CURRENCY) }}</span>
+  </div>
+</div>
+{% set extra = '' %}
+{% if form.data.load_limit_type != 'flat' %}
+{% set extra = ' hide' %}
+{% endif %}
+{{ form_tariff_error(form, 'flat_load_limit', class_='form-group load_limit_type' + extra) }}
+
+<div class="form-group load_limit_type scheduled{{ ' hide' if form.data.load_limit_type != 'scheduled' }}">
+  <label class="control-label col-lg-2">{{ _('Load Limit Periods') }}</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
+    {% include "tariff-load-limits-list.html" %}
+  </div>
+</div>
+{% set extra = '' %}
+{% if form.data.load_limit_type != 'scheduled' %}
+{% set extra = ' hide' %}
+{% endif %}
+{{ form_tariff_error(form, 'load_limits', class_='form-group load-limits' + extra) }}
+
+<div class="form-group" title="{{ form.low_balance_threshold.description }}">
+  {{ form.low_balance_threshold.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.low_balance_threshold(class_="form-control numeric") }}
+    <span class="input-group-addon">{{ _('in %(currency)s', currency=config.CURRENCY) }}</span>
+  </div>
+</div>
+{{ form_tariff_error(form, 'low_balance_threshold') }}
+
+<div class="form-group" title="{{ form.plan_enabled.description }}">
+  {{ form.plan_enabled.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton{{ ' active' if form.data.plan_enabled }}">
+        {{ form.plan_enabled() }}
+      </label>
+    </div>
+  </div>
+</div>
+{{ form_tariff_error(form, 'plan_enabled') }}
+
+{% set extra = '' %}
+{% if not form.data.plan_enabled %}
+{% set extra = ' hide' %}
+{% endif %}
+
+<div class="form-group plan-fixed-fee{{ extra }}"
+     title="{{ form.plan_fixed_fee.description }}">
+  {{ form.plan_fixed_fee.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.plan_fixed_fee(class_="form-control numeric no-negative") }}
+    <span class="input-group-addon">{{ _('in %(currency)s', currency=config.CURRENCY) }}</span>
+  </div>
+</div>
+{{ form_tariff_error(form, 'plan_fixed_fee', class_='form-group plan-fixed-fee' + extra) }}
+
+<div class="form-group plan-price{{ extra }}"
+     title="{{ form.plan_price.description }}">
+  {{ form.plan_price.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.plan_price(class_="form-control numeric no-negative") }}
+    <span class="input-group-addon">{{ _('in %(currency)s', currency=config.CURRENCY) }}</span>
+  </div>
+</div>
+{{ form_tariff_error(form, 'plan_price', class_='form-group plan-price' + extra) }}
+
+<div class="form-group">
+  {{ form.tariff_type.label(class_="control-label col-lg-2") }}
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary{{ ' active' if form.data.tariff_type == "flat" }}">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat"{{ ' checked' if form.data.tariff_type == "flat" }}>{{ _('Flat') }}
+    </label>
+    <label class="btn btn-primary{{ ' active' if form.data.tariff_type == "blockrate" }}">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate"{{ ' checked' if form.data.tariff_type == "blockrate" }}>{{ _('Block rate') }}
+    </label>
+  </div>
+</div>
+{{ form_tariff_error(form, 'tariff_type') }}
+
+<div class="form-group tariff_type flat{{ ' hide' if form.data.tariff_type != "flat" }}">
+  {{ form.flat_price.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.flat_price(class_="form-control numeric no-negative") }}
+    <span class="input-group-addon">{{ _('in %(currency)s per kWh', currency=config.CURRENCY) }}</span>
+  </div>
+</div>
+{% set extra = '' %}
+{% if form.data.tariff_type != 'flat' %}
+{% set extra = ' hide' %}
+{% endif %}
+{{ form_tariff_error(form, 'flat_price', class_='form-group tariff_type' + extra) }}
+
+<div class="form-group tariff_type blockrate{{ ' hide' if form.data.tariff_type != "blockrate" }}">
+  <label class="control-label col-lg-2">{{ _('Block rates') }}</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
+    {% include "tariff-blockrate-list.html" %}
+  </div>
+</div>
+{{ form_tariff_error(form, 'blockrates') }}
+
+<div class="form-group">
+  {{ form.tou_enabled.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton{{ ' active' if form.data.tou_enabled }}">
+        {{ form.tou_enabled }}
+      </label>
+    </div>
+  </div>
+</div>
+{{ form_tariff_error(form, 'tou_enabled') }}
+
+<div class="form-group tou{{ ' hide' if not form.data.tou_enabled }}">
+  <label class="control-label col-lg-2">{{ _('TOU Periods') }}</label>
+  <div class="col-md-5" data-box="tariff-tous">
+    {% include "tariff-tou-list.html" %}
+  </div>
+</div>
+{% set extra = '' %}
+{% if not form.data.tou_enabled %}
+{% set extra = ' hide' %}
+{% endif %}
+{{ form_tariff_error(form, 'tous', class_='form-group tou' + extra) }}
+
+<div class="form-group">
+  {{ form.daily_energy_limit_enabled.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton{{ ' active' if form.data.daily_energy_limit_enabled }}">
+        {{ form.daily_energy_limit_enabled }}
+      </label>
+    </div>
+  </div>
+</div>
+{{ form_tariff_error(form, 'daily_energy_limit_enabled') }}
+
+<div class="form-group daily-energy-limit-reset-hour{{ ' hide' if not form.data.daily_energy_limit_enabled }}"
+     title="{{ form.daily_energy_limit_reset_hour.description }}">
+  {{ form.daily_energy_limit_reset_hour.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.daily_energy_limit_reset_hour(class_="form-control") }}
+  </div>
+</div>
+{% if form.data.daily_energy_limit_enabled -%}
+{{ form_tariff_error(form, 'daily_energy_limit_reset_hour', class_='form-group daily-energy-limit-reset-hour') }}
+{%- endif %}
+
+<div class="form-group daily-energy-limit-value{{ ' hide' if not form.data.daily_energy_limit_enabled }}"
+     title="{{ form.daily_energy_limit_value.description }}">
+  {{ form.daily_energy_limit_value.label(class_="control-label col-lg-2") }}
+  <div class="input-group col-lg-3">
+    {{ form.daily_energy_limit_value(class_="form-control numeric no-negative") }}
+    <span class="input-group-addon">{{ _('in kWh') }}</span>
+  </div>
+</div>
+{% if form.data.daily_energy_limit_enabled -%}
+{{ form_tariff_error(form, 'daily_energy_limit_value', class_='form-group daily-energy-limit-reset-value') }}
+{%- endif %}
diff --git a/sparkmeter/tariff/tests/test_tariffviews.py b/sparkmeter/tariff/tests/test_tariffviews.py
index 828b9b0..75ad734 100644
--- a/sparkmeter/tariff/tests/test_tariffviews.py
+++ b/sparkmeter/tariff/tests/test_tariffviews.py
@@ -55,6 +55,52 @@ def test_add(self, client):
         response = client.get(path)
         self.verify_response(response)
 
+    def test_add_modal_get(self, client):
+        # GET renders the modal form with no validation errors (tariffview lines 78, 90, 32-33, 36).
+        path = "/tariff/add-modal"
+
+        response = client.get(path)
+        assert response.status_code == http.client.OK
+        assert "X-Form-Errors" not in response.headers
+        self.verify_response(response)
+
+    def test_add_modal_post_valid(self, client, config):
+        # A valid POST creates the tariff and returns JSON (tariffview lines 79-88).
+        path = "/tariff/add-modal"
+        data = dict(
+            name="MODAL TARIFF",
+            flat_load_limit=150,
+            plan_price=0,
+            cycle_start_day_of_month=1,
+            tariff_type="flat",
+            flat_price=4,
+            tous="",
+        )
+
+        config["HEROKU"] = False
+        response = client.post(path, data=data)
+
+        assert response.status_code == http.client.OK
+        body = response.json()
+        assert body["message"] == "Tariff created."
+
+        tariffs = Tariff.get_all()
+        assert len(tariffs) == 1
+        assert body["tariff"]["name"] == "MODAL TARIFF"
+        assert body["tariff"]["id"] == str(tariffs[0].id)
+
+    def test_add_modal_post_invalid(self, client):
+        # An invalid POST re-renders the modal form with the error header (tariffview lines 89, 34-35).
+        path = "/tariff/add-modal"
+        data = dict(name="", flat_load_limit=150, flat_price=4)
+
+        response = client.post(path, data=data)
+
+        assert response.status_code == http.client.BAD_REQUEST
+        assert "X-Form-Errors" in response.headers
+        assert "Please set a name for this tariff" in response.text
+        assert not Tariff.query.scalar()
+
     def test_add_form(self, client, config):
         path = "/tariff/add"
 
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add.page b/test-data/meter/test_meterviews-MeterViewTest.test_add.page
index 4140e36..0fc3e8d 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add.page
@@ -29,6 +29,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -206,6 +389,7 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+
   <div class="form-group ">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -227,8 +411,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"></select>
+                        <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_32_bit_serial.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_32_bit_serial.page
index 4140e36..0fc3e8d 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_32_bit_serial.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_32_bit_serial.page
@@ -29,6 +29,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -206,6 +389,7 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+
   <div class="form-group ">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -227,8 +411,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"></select>
+                        <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_duplicated_serial.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_duplicated_serial.page
index 613b330..518e914 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_duplicated_serial.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_duplicated_serial.page
@@ -33,6 +33,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -210,6 +393,10 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+                    <div class="alert alert-danger">
+                      Please correct the highlighted fields and try again.
+                    </div>
+
   <div class="form-group  has-error">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -238,8 +425,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option><option value="00000004-0000-0000-0000-000000000002">tarïff02</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option><option value="00000004-0000-0000-0000-000000000002">tarïff02</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_country_code.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_country_code.page
index 81758d6..cc91b58 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_country_code.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_country_code.page
@@ -12,7 +12,7 @@
 < Set-Cookie: %% COOKIE %%
 < Set-Cookie: %% COOKIE %%
 < Vary: Cookie
-< X-Form-Errors: {"state": ["Not a valid choice."],"tariff": ["Not a valid choice"]}
+< X-Form-Errors: {"state": ["Not a valid choice."],"tariff": ["Please select a tariff or add a new one."]}
 <
 
 <!doctype html>
@@ -33,6 +33,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -210,6 +393,10 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+                    <div class="alert alert-danger">
+                      Please correct the highlighted fields and try again.
+                    </div>
+
   <div class="form-group ">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -228,11 +415,15 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div class="form-group has-error">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"></select>
+                        <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                          <p class="help-block">Please select a tariff or add a new one.</p>
+
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_phone_number.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_phone_number.page
index e7d6b97..87c27e1 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_phone_number.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_phone_number.page
@@ -12,7 +12,7 @@
 < Set-Cookie: %% COOKIE %%
 < Set-Cookie: %% COOKIE %%
 < Vary: Cookie
-< X-Form-Errors: {"state": ["Not a valid choice."],"tariff": ["Not a valid choice"]}
+< X-Form-Errors: {"state": ["Not a valid choice."],"tariff": ["Please select a tariff or add a new one."]}
 <
 
 <!doctype html>
@@ -33,6 +33,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -210,6 +393,10 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+                    <div class="alert alert-danger">
+                      Please correct the highlighted fields and try again.
+                    </div>
+
   <div class="form-group ">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -228,11 +415,15 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div class="form-group has-error">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"></select>
+                        <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                          <p class="help-block">Please select a tariff or add a new one.</p>
+
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_from_cloud.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_from_cloud.page
index eedfa9d..6911773 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_from_cloud.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_from_cloud.page
@@ -29,6 +29,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -206,6 +389,7 @@
         </div>
         <div class="box-content padded row">
                             <form class="form form-horizontal" role="form" method="POST">
+
   <div class="form-group ">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -227,8 +411,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"></select>
+                        <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_phone_number.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_phone_number.page
index 71352a4..98b277e 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_phone_number.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_phone_number.page
@@ -12,7 +12,7 @@
 < Set-Cookie: %% COOKIE %%
 < Set-Cookie: %% COOKIE %%
 < Vary: Cookie
-< X-Form-Errors: {"customer_national_number": ["1 is not a valid national phone number for Brazil"],"state": ["Not a valid choice."],"tariff": ["Not a valid choice"]}
+< X-Form-Errors: {"customer_national_number": ["1 is not a valid national phone number for Brazil"],"state": ["Not a valid choice."],"tariff": ["Please select a tariff or add a new one."]}
 <
 
 <!doctype html>
@@ -33,6 +33,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -210,6 +393,10 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+                    <div class="alert alert-danger">
+                      Please correct the highlighted fields and try again.
+                    </div>
+
   <div class="form-group ">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -228,11 +415,15 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div class="form-group has-error">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"></select>
+                        <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                          <p class="help-block">Please select a tariff or add a new one.</p>
+
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial-invalid-serial.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial-invalid-serial.page
index 8c01146..c5fc215 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial-invalid-serial.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial-invalid-serial.page
@@ -33,6 +33,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -210,6 +393,10 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+                    <div class="alert alert-danger">
+                      Please correct the highlighted fields and try again.
+                    </div>
+
   <div class="form-group  has-error">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -238,8 +425,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial.page
index 11c5c37..cddb3c4 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial.page
@@ -9,7 +9,7 @@
 
 < HTTP/1.1 200 OK
 < Content-Type: text/html; charset=utf-8
-< X-Form-Errors: {"serial": ["Invalid meter serial, must look like \"SMXXX-XX-XXXXXXXX\"."],"state": ["Not a valid choice."],"tariff": ["Not a valid choice"]}
+< X-Form-Errors: {"serial": ["Invalid meter serial, must look like \"SMXXX-XX-XXXXXXXX\"."],"state": ["Not a valid choice."],"tariff": ["Please select a tariff or add a new one."]}
 <
 
 <!doctype html>
@@ -30,6 +30,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -207,6 +390,10 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+                    <div class="alert alert-danger">
+                      Please correct the highlighted fields and try again.
+                    </div>
+
   <div class="form-group  has-error">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -232,11 +419,15 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div class="form-group has-error">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option><option value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                          <p class="help-block">Please select a tariff or add a new one.</p>
+
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer.page
index 7ae9ec3..d0c0aa3 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer.page
@@ -29,6 +29,7 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -206,6 +207,7 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+
   <div class="form-group ">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer_from_cloud.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer_from_cloud.page
index cf901c9..387f84d 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer_from_cloud.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer_from_cloud.page
@@ -29,6 +29,7 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -206,6 +207,7 @@
         </div>
         <div class="box-content padded row">
                             <form class="form form-horizontal" role="form" method="POST">
+
   <div class="form-group ">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_unknown_model.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_unknown_model.page
index f8997c5..fd232f2 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_unknown_model.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_unknown_model.page
@@ -33,6 +33,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -210,6 +393,10 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+                    <div class="alert alert-danger">
+                      Please correct the highlighted fields and try again.
+                    </div>
+
   <div class="form-group  has-error">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
@@ -238,8 +425,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_cloud-customer-state-cloud.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_cloud-customer-state-cloud.page
index 5f1c239..cdbffdc 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_cloud-customer-state-cloud.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_cloud-customer-state-cloud.page
@@ -29,6 +29,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -212,7 +395,8 @@
             <span class="title">Edit Meter SM15R-01-00000001</span>
         </div>
         <div class="box-content padded">
-                            <form class="form form-horizontal" role="form" method="POST"><div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
+                            <form class="form form-horizontal" role="form" method="POST">
+<div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
                       <label class="control-label col-lg-2" for="tags">Tags</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
@@ -220,8 +404,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_ground-customer-state-ground.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_ground-customer-state-ground.page
index 5f1c239..cdbffdc 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_ground-customer-state-ground.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_ground-customer-state-ground.page
@@ -29,6 +29,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -212,7 +395,8 @@
             <span class="title">Edit Meter SM15R-01-00000001</span>
         </div>
         <div class="box-content padded">
-                            <form class="form form-horizontal" role="form" method="POST"><div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
+                            <form class="form form-horizontal" role="form" method="POST">
+<div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
                       <label class="control-label col-lg-2" for="tags">Tags</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
@@ -220,8 +404,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_tariff_cloud-customer-tariff-cloud.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_tariff_cloud-customer-tariff-cloud.page
index 0cbb242..58782fe 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_tariff_cloud-customer-tariff-cloud.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_tariff_cloud-customer-tariff-cloud.page
@@ -29,6 +29,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -212,7 +395,8 @@
             <span class="title">Edit Meter SM15R-01-00000001</span>
         </div>
         <div class="box-content padded">
-                            <form class="form form-horizontal" role="form" method="POST"><div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
+                            <form class="form form-horizontal" role="form" method="POST">
+<div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
                       <label class="control-label col-lg-2" for="tags">Tags</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
@@ -220,8 +404,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option><option value="00000004-0000-0000-0000-000000000002">tarïff02</option><option value="00000004-0000-0000-0000-000000000003">tarïff03</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option><option value="00000004-0000-0000-0000-000000000002">tarïff02</option><option value="00000004-0000-0000-0000-000000000003">tarïff03</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_totalizer.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_totalizer.page
index f5316f3..84a3e19 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_totalizer.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_totalizer.page
@@ -29,6 +29,7 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -212,7 +213,8 @@
             <span class="title">Edit Meter SM15R-01-10000001</span>
         </div>
         <div class="box-content padded">
-                            <form class="form form-horizontal" role="form" method="POST"><div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
+                            <form class="form form-horizontal" role="form" method="POST">
+<div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
                       <label class="control-label col-lg-2" for="tags">Tags</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags-prepopulate.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags-prepopulate.page
index a53ec3d..41614e6 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags-prepopulate.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags-prepopulate.page
@@ -28,6 +28,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -216,7 +399,8 @@
             <span class="title">Edit Meter SM15R-01-00000001</span>
         </div>
         <div class="box-content padded">
-                            <form class="form form-horizontal" role="form" method="POST"><div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
+                            <form class="form form-horizontal" role="form" method="POST">
+<div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
                       <label class="control-label col-lg-2" for="tags">Tags</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"><option value="existing-tag">existing-tag</option><option value="new-tag">new-tag</option></select>
@@ -224,8 +408,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags.page
index fd62bce..bb51492 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags.page
@@ -29,6 +29,189 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
+  <script type="text/javascript">
+    (function($) {
+      var ADD_NEW_VALUE = '__add_new__';
+      var MODAL_ID = '#meter-tariff-modal';
+      var MODAL_FORM_URL = '/tariff/add-modal';
+
+      function flashMessage(message, level) {
+        var alerts = $('.alerts');
+        if (!alerts.length) {
+          return;
+        }
+        alerts.append(
+          $('<div></div>')
+            .addClass('alert alert-' + (level || 'info'))
+            .text(message)
+        );
+      }
+
+      function MeterTariffModal() {
+        this.select = $('select#tariff');
+        if (!this.select.length) {
+          return;
+        }
+        this.previousValue = this.select.val() || '';
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+      }
+
+      MeterTariffModal.prototype.bindEvents = function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+          self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+          if ($(this).val() === ADD_NEW_VALUE) {
+            self.openModal();
+          } else {
+            self.previousValue = self.currentTariffValue();
+          }
+        });
+
+        $(MODAL_ID).on('hidden.bs.modal', function() {
+          self.restoreTariffSelection();
+        });
+
+        $(document).on('click', '#meter-tariff-modal-save', function(event) {
+          event.preventDefault();
+          self.submitModal();
+        });
+      };
+
+      MeterTariffModal.prototype.ensureSelectOptions = function() {
+        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
+          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
+        }
+      };
+
+      MeterTariffModal.prototype.ensureModal = function() {
+        if ($(MODAL_ID).length) {
+          return;
+        }
+        $('body').append(
+          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
+          '  <div class="modal-dialog modal-lg">' +
+          '    <div class="modal-content">' +
+          '      <div class="modal-header">' +
+          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+          '        <h4 class="modal-title">Add a New Tariff</h4>' +
+          '      </div>' +
+          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
+          '      <div class="modal-footer">' +
+          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
+          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
+          '      </div>' +
+          '    </div>' +
+          '  </div>' +
+          '</div>'
+        );
+      };
+
+      MeterTariffModal.prototype.openModal = function() {
+        var self = this;
+        $.get(MODAL_FORM_URL)
+          .done(function(html) {
+            self.renderModal(html);
+            $(MODAL_ID).modal('show');
+          })
+          .fail(function() {
+            flashMessage('Could not load the tariff form.', 'danger');
+            self.restoreTariffSelection();
+          });
+      };
+
+      MeterTariffModal.prototype.renderModal = function(html) {
+        $(MODAL_ID).find('.modal-body').html(html);
+        this.setupModalWidgets();
+      };
+
+      MeterTariffModal.prototype.setupModalWidgets = function() {
+        $(MODAL_ID).find('select.select2').select2();
+        $(MODAL_ID).find('input.numeric').numeric();
+        $(MODAL_ID).find('.iButton').iButton();
+        $(MODAL_ID).find('.iButton-icons').iButton({
+          labelOn: "<i class='icon-ok'></i>",
+          labelOff: "<i class='icon-remove'></i>",
+          handleWidth: 30
+        });
+        $(MODAL_ID).find('input.timepicker').datetimepicker({
+          datepicker: false,
+          closeOnTimeSelect: true,
+          format: 'H:i',
+          mask: '29:00',
+          allowTimes: [
+            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+          ]
+        });
+      };
+
+      MeterTariffModal.prototype.submitModal = function() {
+        var self = this;
+        var form = $(MODAL_ID).find('form#tariff-modal-form');
+        if (!form.length) {
+          return;
+        }
+
+        $.ajax({
+          url: form.attr('action'),
+          method: 'POST',
+          data: form.serialize()
+        }).done(function(data) {
+          self.addTariffOption(data.tariff.id, data.tariff.name);
+          self.previousValue = String(data.tariff.id);
+          self.select.val(self.previousValue);
+          $(MODAL_ID).modal('hide');
+          flashMessage(data.message || 'Tariff created.', 'success');
+        }).fail(function(xhr) {
+          if (xhr.status === 400 && xhr.responseText) {
+            self.renderModal(xhr.responseText);
+            return;
+          }
+          flashMessage('Could not save the tariff.', 'danger');
+        });
+      };
+
+      MeterTariffModal.prototype.addTariffOption = function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+          option = $('<option></option>').val(value).text(label);
+          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
+          if (addNewOption.length) {
+            addNewOption.before(option);
+          } else {
+            this.select.append(option);
+          }
+        } else {
+          option.text(label);
+        }
+      };
+
+      MeterTariffModal.prototype.restoreTariffSelection = function() {
+        if (this.select.val() !== ADD_NEW_VALUE) {
+          return;
+        }
+        this.select.val(this.previousValue || '');
+      };
+
+      MeterTariffModal.prototype.currentTariffValue = function() {
+        var value = this.select.val() || '';
+        return value === ADD_NEW_VALUE ? '' : value;
+      };
+
+      $(function() {
+        new MeterTariffModal();
+      });
+    })(jQuery);
+  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -212,7 +395,8 @@
             <span class="title">Edit Meter SM15R-01-00000001</span>
         </div>
         <div class="box-content padded">
-                            <form class="form form-horizontal" role="form" method="POST"><div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
+                            <form class="form form-horizontal" role="form" method="POST">
+<div class="form-group" title="List of tags for this meter, could mean anything, for instance a geographical location">
                       <label class="control-label col-lg-2" for="tags">Tags</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"><option value="existing-tag">existing-tag</option></select>
@@ -220,8 +404,11 @@
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
-                        <select class="form-control" id="tariff" name="tariff"><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
+                        <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
                       </div>
+                    </div>
+                    <div class="col-lg-offset-2 col-lg-10">
+                      
                     </div><div class="form-group">
                       <label class="control-label col-lg-2" for="active">Active</label>
                       <div class="input-group col-lg-10">
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_unknown_server_error.page b/test-data/meter/test_meterviews-MeterViewTest.test_unknown_server_error.page
index da31037..ede4209 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_unknown_server_error.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_unknown_server_error.page
@@ -33,6 +33,7 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
+  
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -210,6 +211,10 @@
         </div>
         <div class="box-content padded">
                             <form class="form form-horizontal" role="form" method="POST">
+                    <div class="alert alert-danger">
+                      Please correct the highlighted fields and try again.
+                    </div>
+
   <div class="form-group  has-error">
 
             <label class="control-label col-lg-2" for="serial">Serial</label>
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add.page
index d82de5f..d8b92b0 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add.page
@@ -194,14 +194,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -210,16 +202,27 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="id" name="id" type="hidden" value="">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="id" name="id" type="hidden" value="">
 <input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="">
-          </div>
-        </div>
-          <div class="form-group" style="padding-left: 20px; margin-top: -10px">
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
+
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="">
+  </div>
+</div>
+  <div class="form-group" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       You must enter a tariff name
@@ -227,40 +230,46 @@
   </div>
 
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="0">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-          <div class="form-group form-group load_limit_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="0">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+  <div class="form-group form-group load_limit_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Must be higher than 0
     </span>
   </div>
-        <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -318,67 +327,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -439,23 +458,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -513,37 +534,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_form_int_outrange.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_form_int_outrange.page
index e43923a..cdf2143 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_form_int_outrange.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_form_int_outrange.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="null"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,50 +205,67 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="null"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="TARIFF">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="2147483648">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-          <div class="form-group form-group load_limit_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="TARIFF">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="2147483648">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+  <div class="form-group form-group load_limit_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Load Limit must be less than or equal to 2147483647
     </span>
   </div>
-        <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -314,67 +323,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page
new file mode 100644
index 0000000..86a4996
--- /dev/null
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page
@@ -0,0 +1,403 @@
+> GET /tariff/add-modal HTTP/1.1
+> Cookie: session=%% SESSION %%
+> Host: localhost
+> User-Agent: Unittest/1.0
+>
+
+< HTTP/1.1 200 OK
+< Content-Type: text/html; charset=utf-8
+< Set-Cookie: %% COOKIE %%
+< Set-Cookie: %% COOKIE %%
+< Vary: Cookie
+<
+
+<style>
+  #meter-tariff-modal .modal-dialog {
+    width: 900px;
+    max-width: calc(100vw - 40px);
+  }
+
+  #meter-tariff-modal .control-label.col-lg-2 {
+    width: 18%;
+  }
+
+  #meter-tariff-modal .input-group.col-lg-3,
+  #meter-tariff-modal .col-md-5 {
+    width: 52%;
+  }
+
+  #meter-tariff-modal .input-group.col-lg-10,
+  #meter-tariff-modal .btn-group.col-lg-10 {
+    width: 70%;
+  }
+
+  #meter-tariff-modal .input-group .form-control {
+    min-width: 0;
+  }
+
+  @media (max-width: 991px) {
+    #meter-tariff-modal .control-label.col-lg-2,
+    #meter-tariff-modal .input-group.col-lg-3,
+    #meter-tariff-modal .input-group.col-lg-10,
+    #meter-tariff-modal .btn-group.col-lg-10,
+    #meter-tariff-modal .col-md-5 {
+      width: 100%;
+    }
+  }
+</style>
+
+<form class="form form-horizontal tariff" id="tariff-modal-form" method="POST" action="/tariff/add-modal">
+  
+<div id="tariff-form-params"
+     data-blockrates="null"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="null"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="null"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="id" name="id" type="hidden" value="">
+<input id="blockrates" name="blockrates" type="hidden" value="">
+<input id="tous" name="tous" type="hidden" value="">
+<input id="load_limits" name="load_limits" type="hidden" value="">
+
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="0">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
+  <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
+      <thead class="">
+      <tr>
+          <th>Start</th>
+          <th>End</th>
+          <th>Load Limit in watts</th>
+          <th></th>
+      </tr>    </thead>
+    <tfoot><tr>
+  <td colspan="4">
+        <button type="button" class="btn btn-default" id="add-modal" href="#" data-toggle="modal" data-target="#loadLimitModal" data-title="Add a new load limit period" data-object="{}"> Add a load limit period</button>
+  </td>
+</tr>
+</tfoot>
+    <tbody></tbody>
+  </table>
+
+<div class="modal" id="loadLimitModal" tabindex="-1" role="dialog" aria-labelledby="loadLimitModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="loadLimitModalLabel"></h4>
+      </div>
+      <div class="modal-body">
+        <div style="display:none;">
+          <input id="id" name="id" type="hidden" value="">
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="start">Start time</label>
+          <div class="input-group col-lg-5">
+            <input class="form-control timepicker" id="start" name="start" type="text">
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="end">End time</label>
+          <div class="input-group col-lg-5">
+            <input class="form-control timepicker" id="end" name="end" type="text">
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="value">Load limit</label>
+          <div class="input-group col-lg-5">
+            <input class="form-control numeric" id="value" name="value" type="text">
+            <span class="input-group-addon">in watts</span>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button id="save" type="button" class="btn btn-primary">Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+  </div>
+</div>
+
+
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
+
+  <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
+      <thead class="">
+      <tr>
+          <th>min total. energy (kWh)</th>
+          <th>max total. energy (kWh)</th>
+          <th>USD per kWh</th>
+          <th></th>
+      </tr>    </thead>
+    <tfoot><tr data-object="{}">
+  <td colspan="4">
+      <button type="button" class="btn btn-default" id="add-modal" href="#" data-toggle="modal" data-target="#blockrateModal" data-title="Add a tariff block rate"> Add a tariff block rate</button>
+  </td>
+</tr>
+</tfoot>
+    <tbody></tbody>
+  </table>
+
+<div class="modal" id="blockrateModal" tabindex="-1" role="dialog" aria-labelledby="blockrateModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="blockrateModalLabel"></h4>
+      </div>
+      <div class="modal-body">
+        <div style="display:none;">
+          <input id="id" name="id" type="hidden" value="">
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="lower">Minimum total energy</label>
+          <div class="input-group col-lg-6">
+            <input class="form-control numeric" id="lower" name="lower" type="text" value="">
+            <span class="input-group-addon">in kWh</span>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="upper">Maximum total energy</label>
+          <div class="input-group col-lg-6">
+            <input class="form-control numeric" id="upper" name="upper" type="text" value="">
+            <span class="input-group-addon">in kWh</span>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="value">Price</label>
+          <div class="input-group col-lg-6">
+            <input class="form-control numeric" id="value" name="value" type="text" value="">
+            <span class="input-group-addon">in USD per kWh</span>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button id="save" type="button" class="btn btn-primary">Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
+  <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
+      <thead class="">
+      <tr>
+          <th>Start</th>
+          <th>End</th>
+          <th>Modifier</th>
+          <th></th>
+      </tr>    </thead>
+    <tfoot><tr>
+  <td colspan="4">
+        <button type="button" class="btn btn-default" id="add-modal" href="#" data-toggle="modal" data-target="#touModal" data-title="Add a tariff time of use" data-object="{}"> Add a TOU period</button>
+  </td>
+</tr>
+</tfoot>
+    <tbody></tbody>
+  </table>
+
+<div class="modal" id="touModal" tabindex="-1" role="dialog" aria-labelledby="touModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="touModalLabel"></h4>
+      </div>
+      <div class="modal-body">
+        <div style="display:none;">
+          <input id="id" name="id" type="hidden" value="">
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="start">Start time</label>
+          <div class="input-group col-lg-5">
+            <input class="form-control timepicker" id="start" name="start" type="text">
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="end">End time</label>
+          <div class="input-group col-lg-5">
+            <input class="form-control timepicker" id="end" name="end" type="text">
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="control-label col-lg-5" for="value">Modifier</label>
+          <div class="input-group col-lg-5">
+            <input class="form-control numeric" id="value" name="value" type="text">
+            <span class="input-group-addon">% of normal tariff</span>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button id="save" type="button" class="btn btn-primary">Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
+</form>
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_blockrates.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_blockrates.page
index 35dafa4..0bfddcc 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_blockrates.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_blockrates.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[{&#34;lower&#34;: &#34;1&#34;, &#34;upper&#34;: &#34;20&#34;, &#34;value&#34;: &#34;1&#34;}]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[{&#39;lower&#39;: &#39;1&#39;, &#39;upper&#39;: &#39;20&#39;, &#39;value&#39;: &#39;1&#39;}]">
+<div id="tariff-form-params"
+     data-blockrates="[{&#34;lower&#34;: &#34;1&#34;, &#34;upper&#34;: &#34;20&#34;, &#34;value&#34;: &#34;1&#34;}]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[{&#39;lower&#39;: &#39;1&#39;, &#39;upper&#39;: &#39;20&#39;, &#39;value&#39;: &#39;1&#39;}]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,67 +317,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat">Flat
-            </label>
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate" checked>Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat hide">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat">Flat
+    </label>
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate" checked>Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat hide">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -429,29 +448,31 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-          <div class="form-group" style="padding-left: 20px; margin-top: -10px">
+  </div>
+</div>
+  <div class="form-group" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Block rates contain at least one gap, between 0 and 65535
     </span>
   </div>
-        <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_tous.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_tous.page
index 130741d..b896f2a 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_tous.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_tous.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[{&#34;end&#34;: &#34;00:00&#34;, &#34;id&#34;: &#34;612aaccf-a86f-486e-82b4-3abd136f34ef&#34;, &#34;start&#34;: &#34;00:00&#34;, &#34;value&#34;: -100}]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[{&#34;end&#34;: &#34;00:00&#34;, &#34;id&#34;: &#34;612aaccf-a86f-486e-82b4-3abd136f34ef&#34;, &#34;start&#34;: &#34;00:00&#34;, &#34;value&#34;: -100}]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[{&#39;end&#39;: &#39;00:00&#39;, &#39;id&#39;: &#39;612aaccf-a86f-486e-82b4-3abd136f34ef&#39;, &#39;start&#39;: &#39;00:00&#39;, &#39;value&#39;: -100}]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="TARIFF TOU">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="TARIFF TOU">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,67 +317,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -429,23 +448,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton active">
-                <input checked id="tou_enabled" name="tou_enabled" type="checkbox" value="True">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton active">
+        <input checked id="tou_enabled" name="tou_enabled" type="checkbox" value="True">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -503,43 +524,44 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-          <div class="form-group form-group tou" style="padding-left: 20px; margin-top: -10px">
+  </div>
+</div>
+  <div class="form-group form-group tou" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       The TOU period modifier must be a positive number.
     </span>
   </div>
-        <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-negative-post-error.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-negative-post-error.page
index 9746fd8..64ca680 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-negative-post-error.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-negative-post-error.page
@@ -199,14 +199,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -215,44 +207,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -310,73 +319,83 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="-1">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-          <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="-1">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+  <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Flat Rate cannot be negative
     </span>
   </div>
-        <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -437,23 +456,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -511,37 +532,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-post-error.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-post-error.page
index 70a55c7..e7df0b4 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-post-error.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-post-error.page
@@ -199,14 +199,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -215,44 +207,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -310,73 +319,83 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-          <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+  <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please set a Flat Rate
     </span>
   </div>
-        <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -437,23 +456,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -511,37 +532,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit.page
index eae6086..74106f6 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit.page
@@ -198,14 +198,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -214,45 +206,62 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="id" name="id" type="hidden" value="00000004-0000-0000-0000-000000000001">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="id" name="id" type="hidden" value="00000004-0000-0000-0000-000000000001">
 <input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="30">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="30">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -310,67 +319,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="10.0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="10.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -431,23 +450,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -505,37 +526,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_blockrate.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_blockrate.page
index b93f730..3374010 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_blockrate.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_blockrate.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,67 +317,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat">Flat
-            </label>
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate" checked>Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat hide">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat">Flat
+    </label>
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate" checked>Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat hide">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -429,29 +448,31 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-          <div class="form-group" style="padding-left: 20px; margin-top: -10px">
+  </div>
+</div>
+  <div class="form-group" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please add some block rates.
     </span>
   </div>
-        <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_duplicate_name.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_duplicate_name.page
index 49c541d..488f090 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_duplicate_name.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_duplicate_name.page
@@ -194,14 +194,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="null"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -210,15 +202,26 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="null"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="TARIFF">
-          </div>
-        </div>
-          <div class="form-group" style="padding-left: 20px; margin-top: -10px">
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
+
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="TARIFF">
+  </div>
+</div>
+  <div class="form-group" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       A tariff with the name "TARIFF" already exists
@@ -226,34 +229,40 @@
   </div>
 
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -311,67 +320,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -432,23 +451,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -506,37 +527,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_empty_name.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_empty_name.page
index 1bf005a..42ccd71 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_empty_name.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_empty_name.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,15 +205,26 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="">
-          </div>
-        </div>
-          <div class="form-group" style="padding-left: 20px; margin-top: -10px">
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
+
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="">
+  </div>
+</div>
+  <div class="form-group" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please set a name for this tariff
@@ -229,34 +232,40 @@
   </div>
 
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -314,67 +323,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_load_limit.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_load_limit.page
index ceefb7c..8742026 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_load_limit.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_load_limit.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,50 +205,67 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="0">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-          <div class="form-group form-group load_limit_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="0">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+  <div class="form-group form-group load_limit_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please enter a Load Limit for this tariff
     </span>
   </div>
-        <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -314,67 +323,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_monthly_plan_price.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_monthly_plan_price.page
index fd1918d..4c9755c 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_monthly_plan_price.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_monthly_plan_price.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,73 +317,83 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton active">
-                <input checked id="plan_enabled" name="plan_enabled" type="checkbox" value="True">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="-1">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-          <div class="form-group form-group plan-price" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton active">
+        <input checked id="plan_enabled" name="plan_enabled" type="checkbox" value="True">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="-1">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+  <div class="form-group form-group plan-price" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Number must be at least 0.
     </span>
   </div>
-        <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="1">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="1">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_existing_duplicate_names.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_existing_duplicate_names.page
index 0f1f2aa..d56b3cb 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_existing_duplicate_names.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_existing_duplicate_names.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="null"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,15 +205,26 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="null"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="TARIFF">
-          </div>
-        </div>
-          <div class="form-group" style="padding-left: 20px; margin-top: -10px">
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
+
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="TARIFF">
+  </div>
+</div>
+  <div class="form-group" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       A tariff with the name "TARIFF" already exists
@@ -229,34 +232,40 @@
   </div>
 
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="150">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -314,67 +323,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_flat_rate.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_flat_rate.page
index 0189fd9..a19d19a 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_flat_rate.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_flat_rate.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,73 +317,83 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-          <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+  <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please set a Flat Rate
     </span>
   </div>
-        <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_empty.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_empty.page
index be646ab..efcafc1 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_empty.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_empty.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,79 +317,89 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-          <div class="form-group" style="padding-left: 20px; margin-top: -10px">
+  </div>
+</div>
+
+
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+  <div class="form-group" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Low Balance cannot be empty.
     </span>
   </div>
-        <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-          <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+  <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please set a Flat Rate
     </span>
   </div>
-        <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -441,23 +460,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -515,37 +536,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_negative.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_negative.page
index b59e35a..f8298b3 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_negative.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_negative.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,79 +317,89 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="-1">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-          <div class="form-group" style="padding-left: 20px; margin-top: -10px">
+  </div>
+</div>
+
+
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="-1">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+  <div class="form-group" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Low Balance must be higher or equals to 0.
     </span>
   </div>
-        <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-          <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+  <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please set a Flat Rate
     </span>
   </div>
-        <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -441,23 +460,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -515,37 +536,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_flat_rate.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_flat_rate.page
index 9a51721..50c9d3d 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_flat_rate.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_flat_rate.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,73 +317,83 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="-2">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-          <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="-2">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+  <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Flat Rate cannot be negative
     </span>
   </div>
-        <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_load_limit.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_load_limit.page
index 2fcadba..28a8241 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_load_limit.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_load_limit.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,50 +205,67 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="-2">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-          <div class="form-group form-group load_limit_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="-2">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+  <div class="form-group form-group load_limit_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Load Limits cannot be negative
     </span>
   </div>
-        <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -314,67 +323,77 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-                <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="4">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,37 +530,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_no_scheduled_load_limits.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_no_scheduled_load_limits.page
index bbc03f4..4d576d9 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_no_scheduled_load_limits.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_no_scheduled_load_limits.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat">Flat
-            </label>
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled" checked>Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat hide">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="0">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat">Flat
+    </label>
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled" checked>Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat hide">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="0">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,79 +317,89 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-          <div class="form-group form-group load-limits" style="padding-left: 20px; margin-top: -10px">
+  </div>
+</div>
+  <div class="form-group form-group load-limits" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please add some Load limit periods.
     </span>
   </div>
-        <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-          <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+  <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please set a Flat Rate
     </span>
   </div>
-        <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -441,23 +460,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou hide">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="tou_enabled" name="tou_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou hide">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -515,37 +536,38 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_tous.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_tous.page
index 0a36f96..cbcdd79 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_tous.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_tous.page
@@ -197,14 +197,6 @@
 
             <div class="container padded">
                 <div class="row">
-  <div id="tariff-form-params"
-       data-blockrates="[]"
-       data-blockrates-title="&#34;Edit block rate&#34;"
-       data-tous="[]"
-       data-tous-title="&#34;Edit time of use&#34;"
-       data-load-limits="[]"
-       data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
-  </div>
   <div class="row">
     <div class="col-md-12">
     <div class="box">
@@ -213,44 +205,61 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
-        <input id="blockrates" name="blockrates" type="hidden" value="[]">
+<div id="tariff-form-params"
+     data-blockrates="[]"
+     data-blockrates-title="&#34;Edit block rate&#34;"
+     data-tous="[]"
+     data-tous-title="&#34;Edit time of use&#34;"
+     data-load-limits="[]"
+     data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
+</div>
+
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
 <input id="tous" name="tous" type="hidden" value="[]">
-<input id="load_limits" name="load_limits" type="hidden" value="[]">        <div class="form-group" title="The name of this tariff">
-          <label class="control-label col-lg-2" for="name">Name</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control" id="name" name="name" required type="text" value="Tariff">
-          </div>
-        </div>
-        
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
-        <div class="form-group cycle-start-day-of-month"
-             title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
-          <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
-          <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
-            </label>
-          </div>
-        </div>
-                <div class="form-group load_limit_type flat">
-          <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
-            <span class="input-group-addon">in watts</span>
-          </div>
-        </div>
-                <div class="form-group load_limit_type scheduled hide">
-          <label class="control-label col-lg-2">Load Limit Periods</label>
-          <div class="col-md-5" data-box="tariff-load-limits">
+<div class="form-group" title="The name of this tariff">
+  <label class="control-label col-lg-2" for="name">Name</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control" id="name" name="name" required type="text" value="Tariff">
+  </div>
+</div>
+
+
+<div class="form-group cycle-start-day-of-month"
+     title="The plan duration and start day defines the duration of the billing cycle, and what day of month the billing cycle will reset for this tariff. The block rate calculation resets on this day, as well as the monthly plan if a plan is enabled.">
+  <label class="control-label col-lg-2" for="plan_duration_and_start_day">Plan Duration and Start Day</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control numeric no-negative" id="plan_duration_and_start_day" name="plan_duration_and_start_day"><option value="1d1">1 day</option><option selected value="1m1">1 month, starting day 1</option><option value="1m2">1 month, starting day 2</option><option value="1m3">1 month, starting day 3</option><option value="1m4">1 month, starting day 4</option><option value="1m5">1 month, starting day 5</option><option value="1m6">1 month, starting day 6</option><option value="1m7">1 month, starting day 7</option><option value="1m8">1 month, starting day 8</option><option value="1m9">1 month, starting day 9</option><option value="1m10">1 month, starting day 10</option><option value="1m11">1 month, starting day 11</option><option value="1m12">1 month, starting day 12</option><option value="1m13">1 month, starting day 13</option><option value="1m14">1 month, starting day 14</option><option value="1m15">1 month, starting day 15</option><option value="1m16">1 month, starting day 16</option><option value="1m17">1 month, starting day 17</option><option value="1m18">1 month, starting day 18</option><option value="1m19">1 month, starting day 19</option><option value="1m20">1 month, starting day 20</option><option value="1m21">1 month, starting day 21</option><option value="1m22">1 month, starting day 22</option><option value="1m23">1 month, starting day 23</option><option value="1m24">1 month, starting day 24</option><option value="1m25">1 month, starting day 25</option><option value="1m26">1 month, starting day 26</option><option value="1m27">1 month, starting day 27</option><option value="1m28">1 month, starting day 28</option></select>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="load_limit_type">Load Limit Type</label>
+  <div id="radio-group load_limit_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type flat">
+  <label class="control-label col-lg-2" for="flat_load_limit">Load Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_load_limit" max="4800" min="1" name="flat_load_limit" type="number" value="60">
+    <span class="input-group-addon">in watts</span>
+  </div>
+</div>
+
+
+<div class="form-group load_limit_type scheduled hide">
+  <label class="control-label col-lg-2">Load Limit Periods</label>
+  <div class="col-md-5" data-box="tariff-load-limits">
   <table id="tariff-load-limits" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -308,73 +317,83 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group" title="An alert can be sent if available credits go under this threshold.">
-          <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
-          <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
-          <div class="input-group col-lg-3">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
 
 
-        <div class="form-group plan-fixed-fee hide"
-             title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
-          <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-        
-
-        <div class="form-group plan-price hide"
-             title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
-          <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
-            <span class="input-group-addon">in USD</span>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
-          <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
-            <label class="btn btn-primary active">
-              <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
-            </label>
-            <label class="btn btn-primary">
-              <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
-            </label>
-          </div>
-        </div>
-                <div class="form-group tariff_type flat">
-          <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
-            <span class="input-group-addon">in USD per kWh</span>
-          </div>
-        </div>
-          <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
+<div class="form-group" title="An alert can be sent if available credits go under this threshold.">
+  <label class="control-label col-lg-2" for="low_balance_threshold">Warning On Low Balance</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric" id="low_balance_threshold" name="low_balance_threshold" type="text" value="0.0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group" title="Turning on a Plan allows the utility to charge customers a minimum monthly fee for electricity to be used during the current period of time. This charge may include a fixed fee and a minimum spend on energy consumption. A plan automatically renews at the start day every month (if monthly) or at the start of the next day (if daily) if the meter is in On mode, or in Auto and the customer has enough credits to pay for the full plan (fixed fee + minimum spend). Payment for consumption of electricity during the current plan period is charged from the Plan balance at the tariff rate until the balance reaches zero. Any consumption of electricity in the current period beyond this is charged from pre-pay credits that may have been purchased by the customer during the period. At the end of the period, a new Plan balance is automatically filled for customers who have more pre-pay credit in their account than the Plan minimum spend + fixed fee.">
+  <label class="control-label col-lg-2" for="plan_enabled">Plan</label>
+  <div class="input-group col-lg-3">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="plan_enabled" name="plan_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="form-group plan-fixed-fee hide"
+     title="The fixed fee is deducted from the customer's credits wallet when the plan is purchased and is not converted to electricity.">
+  <label class="control-label col-lg-2" for="plan_fixed_fee">Plan Fixed Fee</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_fixed_fee" name="plan_fixed_fee" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group plan-price hide"
+     title="The minimum spend is transferred from the customer's credit wallet to the plan when the plan is purchased and is used to pay for electricity consumption at the tariff price until the plan balance reaches zero or its expiration date is reached.">
+  <label class="control-label col-lg-2" for="plan_price">Plan Minimum Spend</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="plan_price" name="plan_price" type="text" value="0">
+    <span class="input-group-addon">in USD</span>
+  </div>
+</div>
+
+
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tariff_type">Tariff Type</label>
+  <div id="radio-group tariff_type" class="btn-group col-lg-10" data-toggle="buttons">
+    <label class="btn btn-primary active">
+      <input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat
+    </label>
+    <label class="btn btn-primary">
+      <input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate
+    </label>
+  </div>
+</div>
+
+
+<div class="form-group tariff_type flat">
+  <label class="control-label col-lg-2" for="flat_price">Flat Rate</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="flat_price" name="flat_price" type="text" value="0.0">
+    <span class="input-group-addon">in USD per kWh</span>
+  </div>
+</div>
+  <div class="form-group form-group tariff_type" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please set a Flat Rate
     </span>
   </div>
-        <div class="form-group tariff_type blockrate hide">
-          <label class="control-label col-lg-2">Block rates</label>
-          <div class="col-md-5" data-box="tariff-blockrates">
+
+
+<div class="form-group tariff_type blockrate hide">
+  <label class="control-label col-lg-2">Block rates</label>
+  <div class="col-md-5" data-box="tariff-blockrates">
 
   <table id="tariff-blockrates" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
@@ -435,23 +454,25 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-                <div class="form-group">
-          <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton active">
-                <input checked id="tou_enabled" name="tou_enabled" type="checkbox" value="True">
-              </label>
-            </div>
-          </div>
-        </div>
-        
+  </div>
+</div>
+
 
-        <div class="form-group tou">
-          <label class="control-label col-lg-2">TOU Periods</label>
-          <div class="col-md-5" data-box="tariff-tous">
+<div class="form-group">
+  <label class="control-label col-lg-2" for="tou_enabled">Time of Use (TOU) Pricing</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton active">
+        <input checked id="tou_enabled" name="tou_enabled" type="checkbox" value="True">
+      </label>
+    </div>
+  </div>
+</div>
+
+
+<div class="form-group tou">
+  <label class="control-label col-lg-2">TOU Periods</label>
+  <div class="col-md-5" data-box="tariff-tous">
   <table id="tariff-tous" class='table table-striped table-bordered table-hover table-normal dataTable '>
       <thead class="">
       <tr>
@@ -509,43 +530,44 @@
     </div>
   </div>
 </div>
-          </div>
-        </div>
-          <div class="form-group form-group tou" style="padding-left: 20px; margin-top: -10px">
+  </div>
+</div>
+  <div class="form-group form-group tou" style="padding-left: 20px; margin-top: -10px">
     <span class="col-lg-offset-2 help-block note">
     <i class="icon-warning-sign"></i>
       Please add some TOU periods.
     </span>
   </div>
-        <div class="form-group">
-          <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
-          <div class="input-group col-lg-10">
-            <div class="btn-group" data-toggle="buttons">
-              <label class="iButton">
-                <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
-              </label>
-            </div>
-          </div>
-        </div>
-        
 
-        <div class="form-group daily-energy-limit-reset-hour hide"
-             title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
-          <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
-          <div class="input-group col-lg-3">
-            <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
-          </div>
-        </div>
 
+<div class="form-group">
+  <label class="control-label col-lg-2" for="daily_energy_limit_enabled">Daily Energy Limit</label>
+  <div class="input-group col-lg-10">
+    <div class="btn-group" data-toggle="buttons">
+      <label class="iButton">
+        <input id="daily_energy_limit_enabled" name="daily_energy_limit_enabled" type="checkbox" value="y">
+      </label>
+    </div>
+  </div>
+</div>
 
-        <div class="form-group daily-energy-limit-value hide"
-             title="The maximum amount of energy that can be consumed in a day.">
-          <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
-          <div class="input-group col-lg-3">
-            <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
-            <span class="input-group-addon">in kWh</span>
-          </div>
-        </div>
+
+<div class="form-group daily-energy-limit-reset-hour hide"
+     title="The Daily Energy Limit Reset Hour defines when the counter will reset for this meter's Daily Energy Limit">
+  <label class="control-label col-lg-2" for="daily_energy_limit_reset_hour">Daily Energy Limit Reset Hour</label>
+  <div class="input-group col-lg-3">
+    <select class="form-control" id="daily_energy_limit_reset_hour" name="daily_energy_limit_reset_hour"><option selected value="0">00:00</option><option value="1">01:00</option><option value="2">02:00</option><option value="3">03:00</option><option value="4">04:00</option><option value="5">05:00</option><option value="6">06:00</option><option value="7">07:00</option><option value="8">08:00</option><option value="9">09:00</option><option value="10">10:00</option><option value="11">11:00</option><option value="12">12:00</option><option value="13">13:00</option><option value="14">14:00</option><option value="15">15:00</option><option value="16">16:00</option><option value="17">17:00</option><option value="18">18:00</option><option value="19">19:00</option><option value="20">20:00</option><option value="21">21:00</option><option value="22">22:00</option><option value="23">23:00</option></select>
+  </div>
+</div>
+
+<div class="form-group daily-energy-limit-value hide"
+     title="The maximum amount of energy that can be consumed in a day.">
+  <label class="control-label col-lg-2" for="daily_energy_limit_value">Daily Energy Limit</label>
+  <div class="input-group col-lg-3">
+    <input class="form-control numeric no-negative" id="daily_energy_limit_value" name="daily_energy_limit_value" type="text" value="0.0">
+    <span class="input-group-addon">in kWh</span>
+  </div>
+</div>
         <div class="form-group">
           <div class="col-lg-offset-2 col-lg-10">
             <input class="btn btn-primary" id="save_button" name="save_button" type="submit" value="Save">

From 0627fa306771eaa20a5436071cf0f30454558c6b Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:26:02 -0400
Subject: [PATCH 02/11] Derive the test image version from the current commit
 in a worktree

A worktree's .git is a file rather than a directory, so hatch-vcs cannot
read it from the build context and the version was pinned to a bare
0.0.0. sparkmeter.__version__ derives git_version from the PEP 440 local
segment, which 0.0.0 does not have, leaving it empty. The page tests
scrub GIT_VERSION out of every snapshot with str.replace(), and replacing
the empty string inserts the marker between every character, so every
page test failed.
---
 scripts/run_coverage.sh | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/scripts/run_coverage.sh b/scripts/run_coverage.sh
index 0c822d1..ce3eb91 100644
--- a/scripts/run_coverage.sh
+++ b/scripts/run_coverage.sh
@@ -8,11 +8,18 @@ compare_branch="${DIFF_COVER_COMPARE_BRANCH:-origin/main}"
 fail_under="${DIFF_COVER_FAIL_UNDER:-90}"
 
 # A git worktree's .git is a file, not a directory, and is unreadable inside the
-# build context, so hatch-vcs cannot derive the version. Supply a placeholder in
-# that case; a normal checkout leaves it empty and reads .git as usual.
+# build context, so hatch-vcs cannot derive the version. Build one from the
+# current commit in that case; a normal checkout leaves it empty and reads .git
+# as usual.
+#
+# The local segment (`+g<short hash>`) is not optional. `sparkmeter.__version__`
+# derives `git_version` from it and yields "" when it is absent, and the page
+# tests scrub `GIT_VERSION` out of every snapshot with `str.replace()`. Replacing
+# the empty string inserts the marker between every character of every snapshot,
+# which fails the whole page-test suite.
 version=""
 if [ -f .git ]; then
-    version="0.0.0"
+    version="0.0.0+g$(git rev-parse --short HEAD)"
 fi
 
 docker compose -f docker-compose.test.yml build \

From 673cce30172c59307ffcbf95f3cc83d30b461b9e Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:31:30 -0400
Subject: [PATCH 03/11] Report tariff modal form errors through the shared
 X-Form-Errors builder

The block rate, TOU and scheduled load limit validators store the raw
ValueError rather than its message. render_modal_form serialized
form.errors directly, and the JSON encoder has no branch for exceptions,
so any of those three validation failures raised a TypeError and turned
the 400 into a 500.

BaseForm.render already coerced every error to str and logged the result.
Move that into set_form_errors_header and use it from both, so the modal
and the standalone page report errors identically.

Build the modal form from request.form on GET as well, matching
/tariff/add. With no formdata the JSON collection fields keep None, which
renders as null in the params element and as an empty value in the hidden
inputs, and posting an untouched modal back then fails to parse.

Use http.client.OK for render_modal_form's default status, consistent
with the rest of the module.
---
 sparkmeter/tariff/tariffview.py               | 12 ++-
 sparkmeter/tariff/tests/test_tariffviews.py   | 84 +++++++++++++++++--
 sparkmeter/web/forms.py                       | 35 ++++++--
 ...ews-TariffViewTest.test_add_modal_get.page | 12 +--
 4 files changed, 115 insertions(+), 28 deletions(-)

diff --git a/sparkmeter/tariff/tariffview.py b/sparkmeter/tariff/tariffview.py
index d452573..1c4594f 100644
--- a/sparkmeter/tariff/tariffview.py
+++ b/sparkmeter/tariff/tariffview.py
@@ -16,24 +16,22 @@
 from werkzeug.utils import redirect
 
 from sparkmeter.misc.htmlutils import build_link
-from sparkmeter.misc.jsonutils import json_dumps, jsonify
+from sparkmeter.misc.jsonutils import jsonify
 from sparkmeter.tariff.tariffdomain import Tariff
 from sparkmeter.tariff.tariffform import TariffForm
 from sparkmeter.tariff.tariffutils import add_tariff_from_form, update_tariff_from_form
 from sparkmeter.web.blueprint import AuthBlueprint
+from sparkmeter.web.forms import set_form_errors_header
 from sparkmeter.web.permission import verify_permission
 
 logger = logging.getLogger(__name__)
 tariff = AuthBlueprint("tariff", __name__)
 
 
-def render_modal_form(form, status=200):
+def render_modal_form(form, status=http.client.OK):
     """Render the tariff modal form with optional validation metadata."""
     body = render_template("tariff-modal-form.html", form=form)
-    response = Response(body, status=status)
-    if form.errors:
-        response.headers["X-Form-Errors"] = json_dumps(form.errors)
-    return response
+    return set_form_errors_header(Response(body, status=status), form)
 
 
 @tariff.route("/tariff/")
@@ -75,7 +73,7 @@ def add():
 @verify_permission("tariff", "add")
 def add_modal():
     """Add tariff form rendered for the meter modal workflow."""
-    form = TariffForm(request.form if request.method == "POST" else None)
+    form = TariffForm(request.form)
     if request.method == "POST":
         tariff = add_tariff_from_form(form)
         if tariff:
diff --git a/sparkmeter/tariff/tests/test_tariffviews.py b/sparkmeter/tariff/tests/test_tariffviews.py
index 75ad734..d351070 100644
--- a/sparkmeter/tariff/tests/test_tariffviews.py
+++ b/sparkmeter/tariff/tests/test_tariffviews.py
@@ -13,10 +13,10 @@
 from sparkmeter.event.eventdomain import Event
 from sparkmeter.meter.meterdomain import MeterConfig
 from sparkmeter.misc.htmlutils import build_link
-from sparkmeter.misc.jsonutils import json_dumps
+from sparkmeter.misc.jsonutils import json_dumps, json_loads
 from sparkmeter.tariff.tariffdomain import Tariff
 from sparkmeter.tests.base import WebViewTestCaseBase
-from sparkmeter.tests.test_data_factory import MeterFactory, TariffFactory
+from sparkmeter.tests.test_data_factory import MeterFactory, TariffFactory, VendorFactory
 
 
 @pytest.fixture(scope="module", autouse=True)
@@ -56,7 +56,6 @@ def test_add(self, client):
         self.verify_response(response)
 
     def test_add_modal_get(self, client):
-        # GET renders the modal form with no validation errors (tariffview lines 78, 90, 32-33, 36).
         path = "/tariff/add-modal"
 
         response = client.get(path)
@@ -64,8 +63,39 @@ def test_add_modal_get(self, client):
         assert "X-Form-Errors" not in response.headers
         self.verify_response(response)
 
+    def test_add_modal_get_renders_empty_collections(self, client):
+        """A freshly opened modal must match /tariff/add, which posts back cleanly.
+
+        With no formdata the JSON fields keep ``None``, which renders as
+        ``null``/``""`` instead of ``[]`` and cannot be posted back.
+        """
+        response = client.get("/tariff/add-modal")
+        standalone = client.get("/tariff/add")
+
+        for attribute in ('data-blockrates="[]"', 'data-tous="[]"', 'data-load-limits="[]"'):
+            assert attribute in response.text
+            assert attribute in standalone.text
+
+    def test_add_modal_untouched_post_is_parseable(self, client):
+        """Submitting an untouched modal must not post unparseable collections."""
+        data = dict(name="", blockrates="[]", tous="[]", load_limits="[]")
+
+        response = client.post("/tariff/add-modal", data=data)
+
+        assert response.status_code == http.client.BAD_REQUEST
+        errors = json_loads(response.headers["X-Form-Errors"])
+        assert "blockrates" not in errors
+        assert "tous" not in errors
+        assert "load_limits" not in errors
+
+    def test_add_modal_forbidden_without_permission(self, client, vendor_role):
+        """The modal endpoint is behind the same tariff:add permission as /tariff/add."""
+        client.login_as(VendorFactory(roles=[vendor_role]))
+
+        assert client.get("/tariff/add-modal").status_code == http.client.NOT_FOUND
+        assert client.post("/tariff/add-modal", data={}).status_code == http.client.NOT_FOUND
+
     def test_add_modal_post_valid(self, client, config):
-        # A valid POST creates the tariff and returns JSON (tariffview lines 79-88).
         path = "/tariff/add-modal"
         data = dict(
             name="MODAL TARIFF",
@@ -90,17 +120,59 @@ def test_add_modal_post_valid(self, client, config):
         assert body["tariff"]["id"] == str(tariffs[0].id)
 
     def test_add_modal_post_invalid(self, client):
-        # An invalid POST re-renders the modal form with the error header (tariffview lines 89, 34-35).
         path = "/tariff/add-modal"
         data = dict(name="", flat_load_limit=150, flat_price=4)
 
         response = client.post(path, data=data)
 
         assert response.status_code == http.client.BAD_REQUEST
-        assert "X-Form-Errors" in response.headers
+        errors = json_loads(response.headers["X-Form-Errors"])
+        assert errors["name"] == ["Please set a name for this tariff"]
         assert "Please set a name for this tariff" in response.text
         assert not Tariff.query.scalar()
 
+    @pytest.mark.parametrize(
+        "field, data, message",
+        [
+            (
+                "blockrates",
+                dict(
+                    tariff_type=Tariff.TYPE_BLOCKRATE,
+                    blockrates=json_dumps([{"lower": "1", "upper": "20", "value": "1"}]),
+                ),
+                "Block rates contain at least one gap, between 0 and 65535",
+            ),
+            (
+                "tous",
+                dict(
+                    tou_enabled=True,
+                    tous=json_dumps([{"start": "00:00", "end": "12:00", "value": -100}]),
+                ),
+                "The TOU period modifier must be a positive number.",
+            ),
+            (
+                "load_limits",
+                dict(load_limit_type=Tariff.LOAD_LIMIT_TYPE_SCHEDULED, load_limits=json_dumps([])),
+                "Please add some Load limit periods.",
+            ),
+        ],
+    )
+    def test_add_modal_post_collection_error(self, client, field, data, message):
+        """These validators store the raw exception, which is not JSON serializable.
+
+        Reporting them used to raise a TypeError out of the error header and
+        turn the response into a 500.
+        """
+        path = "/tariff/add-modal"
+        data = dict(data, name="TARIFF", flat_load_limit=150, flat_price=4)
+
+        response = client.post(path, data=data)
+
+        assert response.status_code == http.client.BAD_REQUEST
+        errors = json_loads(response.headers["X-Form-Errors"])
+        assert errors[field] == [message]
+        assert not Tariff.query.scalar()
+
     def test_add_form(self, client, config):
         path = "/tariff/add"
 
diff --git a/sparkmeter/web/forms.py b/sparkmeter/web/forms.py
index 84b02cd..17144c3 100644
--- a/sparkmeter/web/forms.py
+++ b/sparkmeter/web/forms.py
@@ -39,6 +39,31 @@ def getall(self, key):
         return [self[key]]
 
 
+def set_form_errors_header(response, form):
+    """Attach a form's validation errors to a response as ``X-Form-Errors``.
+
+    This is for development, and especially so that unittests can show a nicer
+    error when there is a form error.
+
+    Every error is coerced to ``str``: validators are free to store exception
+    instances rather than messages, and those are not JSON serializable.
+
+    :param response: the response to annotate.
+    :param form: the form whose errors should be reported.
+    :return: the same response, for convenience.
+    :rtype: Response
+    """
+    if not form.errors:
+        return response
+
+    error_dict = {}
+    for name, errors in list(form.errors.items()):
+        error_dict[name] = list(map(str, errors))
+    response.headers["X-Form-Errors"] = json_dumps(error_dict)
+    logger.warning("{} errors: {} {}".format(type(form).__name__, error_dict, form.data))
+    return response
+
+
 class BaseForm(FlaskForm):
     """Base form, used by all other forms in the application."""
 
@@ -102,15 +127,7 @@ def render(self, **context):
         :rtype: Response
         """
         body = render_template(self.template_filename, form=self, **context)
-        response = Response(body)
-        if self.errors:
-            error_dict = {}
-            for name, errors in list(self.errors.items()):
-                error_dict[name] = list(map(str, errors))
-            response.headers["X-Form-Errors"] = json_dumps(error_dict)
-            logger.warning("{} errors: {} {}".format(type(self).__name__, error_dict, self.data))
-
-        return response
+        return set_form_errors_header(Response(body), self)
 
 
 def flatten_json(form, json, parent_key="", separator="-", skip_unknown_keys=True):  # pragma: nocoverage
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page
index 86a4996..da516c3 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page
@@ -49,18 +49,18 @@
 <form class="form form-horizontal tariff" id="tariff-modal-form" method="POST" action="/tariff/add-modal">
   
 <div id="tariff-form-params"
-     data-blockrates="null"
+     data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
-     data-tous="null"
+     data-tous="[]"
      data-tous-title="&#34;Edit time of use&#34;"
-     data-load-limits="null"
+     data-load-limits="[]"
      data-load-limits-title="&#34;Edit scheduled load limits of use&#34;">
 </div>
 
 <input id="id" name="id" type="hidden" value="">
-<input id="blockrates" name="blockrates" type="hidden" value="">
-<input id="tous" name="tous" type="hidden" value="">
-<input id="load_limits" name="load_limits" type="hidden" value="">
+<input id="blockrates" name="blockrates" type="hidden" value="[]">
+<input id="tous" name="tous" type="hidden" value="[]">
+<input id="load_limits" name="load_limits" type="hidden" value="[]">
 
 <div class="form-group" title="The name of this tariff">
   <label class="control-label col-lg-2" for="name">Name</label>

From 615d40ee4f33507ed284973213daae73b8b9f365 Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:37:33 -0400
Subject: [PATCH 04/11] Move the tariff modal behavior into a page module

The behavior lived in a ~190 line inline <script> in meter-form.html: not
linted, not covered by the jest suite, not bundled, and baked into 19
page snapshots. Move it to meter/js/meter-tariff-modal.js, registered as
the meter-form page loader, and cover it with a spec.

Because the module can require tariff/js/tariff-form.js, the tariff form
behavior now runs inside the modal. Previously TariffForm was registered
only for the tariff-form page, so in the modal the block rate and
scheduled load limit toggles, the plan, TOU and daily energy limit
checkboxes, and the three table editors all did nothing. Namespace
TariffForm's delegated handlers so re-rendering the fragment after a 400
rebinds them instead of stacking a second copy on document.

The fragment is a real <form> and the save control sits outside it in the
modal footer, so pressing Enter in any field did a full page POST and
navigated away from the half-filled meter form. Handle submit as well as
the save button click.

The shared partial emits the block rate, TOU and load limit editors as
top-level modals. Injected into the modal body they became nested modals,
which Bootstrap 3 does not support, and their hidden.bs.modal bubbled to
the outer handler. Relocate them to <body>, stack their z-indexes, keep
the body scroll lock while a modal is still open, and have the outer
handler react only to its own modal.

An expired session redirects to the login page, and jQuery follows the
redirect, so the login page arrived as a 200 and was injected into the
modal body; on POST it reached the success path and threw on
data.tariff.id. Check for the tariff form and for the tariff payload, and
tell the user to reload and sign in.

Cancelling restored the select with `this.previousValue || ''`, and ''
matches no option, so the select rendered empty. Restore the blank
option's actual value, __None.

Guard save against a second request while one is in flight, since
tariff.name has no unique constraint, and drop a response that arrives
after the modal was dismissed.

Define form_tariff_error once, in the partial that calls it, instead of
in each of the two including templates.

Move the modal's layout rules from a <style> block in the fetched
fragment, which accumulated an element per open and per re-render, into
modal.scss, and let .modal-lg set the dialog width.

Carry the modal's strings in data attributes rather than interpolating
them into JavaScript string literals, wrap <Add New> in _(), and extract
the new strings into messages.pot. flask-babel's LazyString defines
__html__, so translated text is emitted unescaped; forceescape is needed
for the attribute values.

Reject __add_new__ server-side. It is a client-side sentinel with no
server counterpart, and allow_blank made a posted __add_new__ report
"Please select a tariff or add a new one." rather than an invalid choice.
Drop validate_tariff's meter_type check, which cannot be false: __init__
deletes the field for totalizers.

Add tests for the meter form consumer, validate_tariff, the blank option
and its text, the tariff error markup, and the tariff:add permission
boundary on /tariff/add-modal.
---
 assets/stylesheets/modal.scss                 |  33 ++
 messages.pot                                  |  36 ++
 sparkmeter/meter/js/meter-pages.js            |   5 +
 sparkmeter/meter/js/meter-tariff-modal.js     | 352 +++++++++++++++
 .../meter/js/meter-tariff-modal.spec.js       | 399 ++++++++++++++++++
 sparkmeter/meter/meterform.py                 |  15 +-
 sparkmeter/meter/templates/meter-form.html    | 207 +--------
 sparkmeter/meter/tests/test_meterviews.py     |  41 ++
 sparkmeter/tariff/js/tariff-form.js           |  17 +-
 sparkmeter/tariff/templates/tariff-form.html  |  13 -
 .../tariff/templates/tariff-modal-form.html   |  48 ---
 .../templates/tariff/_tariff-form-fields.html |  13 +
 ...est_meterviews-MeterViewTest.test_add.page | 201 +--------
 ...-MeterViewTest.test_add_32_bit_serial.page | 201 +--------
 ...erViewTest.test_add_duplicated_serial.page | 201 +--------
 ...rViewTest.test_add_empty_country_code.page | 201 +--------
 ...rViewTest.test_add_empty_phone_number.page | 201 +--------
 ...ews-MeterViewTest.test_add_from_cloud.page | 201 +--------
 ...iewTest.test_add_invalid_phone_number.page | 201 +--------
 ...est_add_invalid_serial-invalid-serial.page | 201 +--------
 ...MeterViewTest.test_add_invalid_serial.page | 201 +--------
 ...iews-MeterViewTest.test_add_totalizer.page |   3 +-
 ...iewTest.test_add_totalizer_from_cloud.page |   3 +-
 ...-MeterViewTest.test_add_unknown_model.page | 201 +--------
 ...omer_state_cloud-customer-state-cloud.page | 201 +--------
 ...er_state_ground-customer-state-ground.page | 201 +--------
 ...er_tariff_cloud-customer-tariff-cloud.page | 201 +--------
 ...ews-MeterViewTest.test_edit_totalizer.page |   3 +-
 ...wTest.test_edit_with_tags-prepopulate.page | 201 +--------
 ...ews-MeterViewTest.test_edit_with_tags.page | 201 +--------
 ...terViewTest.test_unknown_server_error.page |   3 +-
 ...t_tariffviews-TariffViewTest.test_add.page |   1 +
 ...ffViewTest.test_add_form_int_outrange.page |   1 +
 ...ews-TariffViewTest.test_add_modal_get.page |  37 +-
 ...Test.test_add_with_invalid_blockrates.page |   1 +
 ...ffViewTest.test_add_with_invalid_tous.page |   1 +
 ...st.test_edit-edit-negative-post-error.page |   1 +
 ...iffViewTest.test_edit-edit-post-error.page |   1 +
 ..._tariffviews-TariffViewTest.test_edit.page |   1 +
 ...s-TariffViewTest.test_error_blockrate.page |   1 +
 ...iffViewTest.test_error_duplicate_name.page |   1 +
 ...-TariffViewTest.test_error_empty_name.page |   1 +
 ...fViewTest.test_error_enter_load_limit.page |   1 +
 ...t.test_error_enter_monthly_plan_price.page |   1 +
 ...t.test_error_existing_duplicate_names.page |   1 +
 ...s-TariffViewTest.test_error_flat_rate.page |   1 +
 ...ViewTest.test_error_low_balance_empty.page |   1 +
 ...wTest.test_error_low_balance_negative.page |   1 +
 ...iewTest.test_error_negative_flat_rate.page |   1 +
 ...ewTest.test_error_negative_load_limit.page |   1 +
 ...t.test_error_no_scheduled_load_limits.page |   1 +
 ...fviews-TariffViewTest.test_error_tous.page |   1 +
 52 files changed, 1189 insertions(+), 3074 deletions(-)
 create mode 100644 sparkmeter/meter/js/meter-tariff-modal.js
 create mode 100644 sparkmeter/meter/js/meter-tariff-modal.spec.js

diff --git a/assets/stylesheets/modal.scss b/assets/stylesheets/modal.scss
index c512b50..82b5372 100644
--- a/assets/stylesheets/modal.scss
+++ b/assets/stylesheets/modal.scss
@@ -29,6 +29,39 @@
   border-bottom: 1px solid #CDCDCD;
 }
 
+// The tariff form is a horizontal form laid out for a full-width page. Inside
+// the tariff modal its Bootstrap column widths have to be narrowed to fit the
+// dialog; `.modal-lg` supplies the dialog width itself.
+#meter-tariff-modal {
+  .control-label.col-lg-2 {
+    width: 18%;
+  }
+
+  .input-group.col-lg-3,
+  .col-md-5 {
+    width: 52%;
+  }
+
+  .input-group.col-lg-10,
+  .btn-group.col-lg-10 {
+    width: 70%;
+  }
+
+  .input-group .form-control {
+    min-width: 0;
+  }
+
+  @media (max-width: 991px) {
+    .control-label.col-lg-2,
+    .input-group.col-lg-3,
+    .input-group.col-lg-10,
+    .btn-group.col-lg-10,
+    .col-md-5 {
+      width: 100%;
+    }
+  }
+}
+
 .delete-text {
   span {
     text-align: center;
diff --git a/messages.pot b/messages.pot
index 5172ecb..7a93394 100644
--- a/messages.pot
+++ b/messages.pot
@@ -990,3 +990,39 @@ msgstr ""
 
 msgid "Saved custom settings file."
 msgstr ""
+
+msgid "<Add New>"
+msgstr ""
+
+msgid "Add a New Tariff"
+msgstr ""
+
+msgid "Loading tariff form..."
+msgstr ""
+
+msgid "Saving..."
+msgstr ""
+
+msgid "Cancel"
+msgstr ""
+
+msgid "Tariff created."
+msgstr ""
+
+msgid "Could not load the tariff form."
+msgstr ""
+
+msgid "Could not save the tariff."
+msgstr ""
+
+msgid "Your session has expired. Please reload the page and sign in again."
+msgstr ""
+
+msgid "Select a tariff"
+msgstr ""
+
+msgid "Please select a tariff or add a new one."
+msgstr ""
+
+msgid "No tariff was created. Please select a tariff or add a new one."
+msgstr ""
diff --git a/sparkmeter/meter/js/meter-pages.js b/sparkmeter/meter/js/meter-pages.js
index 9ea2b00..bb33555 100644
--- a/sparkmeter/meter/js/meter-pages.js
+++ b/sparkmeter/meter/js/meter-pages.js
@@ -10,6 +10,11 @@ base.registerPageLoader('meter-chart', function() {
     new MeterChart.MeterChart();
 });
 
+base.registerPageLoader('meter-form', function() {
+    var MeterTariffModal = require('meter/js/meter-tariff-modal.js');
+    new MeterTariffModal.MeterTariffModal();
+});
+
 base.registerPageLoader('meter-view', function() {
     var MeterView = require('meter/js/meter-view.js');
     new MeterView.MeterView();
diff --git a/sparkmeter/meter/js/meter-tariff-modal.js b/sparkmeter/meter/js/meter-tariff-modal.js
new file mode 100644
index 0000000..e411b38
--- /dev/null
+++ b/sparkmeter/meter/js/meter-tariff-modal.js
@@ -0,0 +1,352 @@
+// -*- coding: utf-8 -*-
+// Copyright © 2013-2026 EarthSpark International Corp.
+// All Rights Reserved.
+//
+// Lets the customer meter form create a tariff without leaving the page: the
+// tariff select carries an extra option that loads /tariff/add-modal into a
+// modal, posts it over AJAX, and inserts the created tariff into the select.
+
+var base = require('base.js');
+var TariffForm = require('tariff/js/tariff-form.js');
+
+var MODAL_ID = 'meter-tariff-modal';
+var MODAL_SELECTOR = '#' + MODAL_ID;
+var FORM_SELECTOR = 'form#tariff-modal-form';
+
+// QuerySelectField(allow_blank=True) renders its blank option with this value.
+// Restoring the select to '' instead would leave selectedIndex at -1 and render
+// the select empty.
+var BLANK_VALUE = '__None';
+
+// The tariff form partial emits one editor modal per collection field. Bootstrap
+// 3 does not support a modal nested inside another modal, so these are moved out
+// of the fragment and appended to <body> as siblings of the tariff modal.
+var EDITOR_MODAL_SELECTOR = '#loadLimitModal, #blockrateModal, #touModal';
+
+// Bootstrap 3 gives every modal the same z-index, so a second modal opened on
+// top of the first lands under the first one's backdrop. Each stacked modal is
+// raised above the one below it, with its own backdrop just underneath.
+// The first modal keeps Bootstrap's own values (1050 dialog / 1040 backdrop).
+var BASE_MODAL_Z_INDEX = 1050;
+var MODAL_Z_INDEX_STEP = 20;
+var BACKDROP_Z_INDEX_OFFSET = 10;
+
+// Bootstrap 3 marks an open modal with `in`. `:visible` would be equivalent in
+// a browser, but it is layout-dependent, and `in` is what Bootstrap itself
+// toggles around the `show`/`hidden` events.
+var OPEN_MODAL_SELECTOR = '.modal.in';
+
+function MeterTariffModal() {
+    this._init();
+}
+
+exports.MeterTariffModal = MeterTariffModal;
+
+MeterTariffModal.prototype = {
+    _init: function() {
+        this.params = $('#meter-tariff-modal-params');
+        this.select = $('select#tariff');
+        if (!this.select.length || !this.params.length) {
+            return;
+        }
+
+        this.addNewValue = this.params.attr('data-add-new-value');
+        this.previousValue = this.select.val() || BLANK_VALUE;
+        this.requestSeq = 0;
+        this.pendingRequestId = null;
+
+        this.ensureSelectOptions();
+        this.ensureModal();
+        this.bindEvents();
+    },
+
+    text: function(name) {
+        return this.params.attr('data-text-' + name);
+    },
+
+    bindEvents: function() {
+        var self = this;
+
+        this.select.on('focusin', function() {
+            // Focus can land here again while the modal is open; the sentinel
+            // is not a value worth remembering.
+            if ($(this).val() === self.addNewValue) {
+                return;
+            }
+            self.previousValue = self.currentTariffValue();
+        });
+
+        this.select.on('change', function() {
+            if ($(this).val() === self.addNewValue) {
+                self.openModal();
+            } else {
+                self.previousValue = self.currentTariffValue();
+            }
+        });
+
+        this.modal.on('hidden.bs.modal', function(event) {
+            // The editor modals live at the same level in <body>, but guard
+            // anyway so a nested dialog can never drive the outer modal.
+            if (event.target !== this) {
+                return;
+            }
+            self.abortPendingRequest();
+            self.restoreTariffSelection();
+        });
+
+        this.modal.on('click', '#meter-tariff-modal-save', function(event) {
+            event.preventDefault();
+            self.submitModal();
+        });
+
+        // The fragment is a real <form>, so Enter in any of its fields would
+        // otherwise submit it as a full-page POST and navigate away from the
+        // half-filled meter form.
+        this.modal.on('submit', FORM_SELECTOR, function(event) {
+            event.preventDefault();
+            self.submitModal();
+        });
+
+        // Bootstrap 3 keeps a single backdrop and drops `modal-open` off <body>
+        // whenever any modal closes, which breaks the still-open tariff modal.
+        $(document).on('show.bs.modal.metertariff', '.modal', this.onAnyModalShow);
+        $(document).on('hidden.bs.modal.metertariff', '.modal', this.onAnyModalHidden);
+    },
+
+    onAnyModalShow: function() {
+        // Bootstrap adds `in` after this event, so this counts the modals that
+        // are already open underneath the one being shown.
+        var zIndex = BASE_MODAL_Z_INDEX + MODAL_Z_INDEX_STEP * $(OPEN_MODAL_SELECTOR).length;
+        $(this).css('z-index', zIndex);
+        setTimeout(function() {
+            $('.modal-backdrop:not(.modal-stack)')
+                .css('z-index', zIndex - BACKDROP_Z_INDEX_OFFSET)
+                .addClass('modal-stack');
+        }, 0);
+    },
+
+    onAnyModalHidden: function() {
+        // Bootstrap drops `modal-open` off <body> whenever any modal closes,
+        // which unlocks scrolling behind a modal that is still open.
+        if ($(OPEN_MODAL_SELECTOR).length) {
+            $(document.body).addClass('modal-open');
+        }
+    },
+
+    ensureSelectOptions: function() {
+        if (!this.select.find('option[value="' + this.addNewValue + '"]').length) {
+            this.select.append(
+                $('<option></option>')
+                    .val(this.addNewValue)
+                    .text(this.params.attr('data-add-new-label'))
+            );
+        }
+    },
+
+    ensureModal: function() {
+        if ($(MODAL_SELECTOR).length) {
+            this.adoptModal();
+            return;
+        }
+        $('body').append(
+            $('<div></div>')
+                .addClass('modal fade')
+                .attr({id: MODAL_ID, tabindex: '-1', role: 'dialog', 'aria-hidden': 'true'})
+                .html(
+                    '<div class="modal-dialog modal-lg">' +
+                    '  <div class="modal-content">' +
+                    '    <div class="modal-header">' +
+                    '      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+                    '      <h4 class="modal-title"></h4>' +
+                    '    </div>' +
+                    '    <div class="modal-body"></div>' +
+                    '    <div class="modal-footer">' +
+                    '      <button type="button" class="btn btn-default" data-dismiss="modal"></button>' +
+                    '      <button type="button" class="btn btn-primary" id="meter-tariff-modal-save"></button>' +
+                    '    </div>' +
+                    '  </div>' +
+                    '</div>'
+                )
+        );
+        this.adoptModal();
+        this.modal.find('.modal-title').text(this.text('title'));
+        this.modal.find('.modal-body').html($('<p></p>').text(this.text('loading')));
+        this.modal.find('.modal-footer .btn-default').text(this.text('cancel'));
+        this.saveButton.text(this.text('save'));
+    },
+
+    adoptModal: function() {
+        this.modal = $(MODAL_SELECTOR);
+        this.saveButton = this.modal.find('#meter-tariff-modal-save');
+    },
+
+    openModal: function() {
+        var self = this;
+        $.get(this.params.attr('data-modal-url'))
+            .done(function(html) {
+                if (!self.renderModal(html)) {
+                    self.sessionExpired();
+                    return;
+                }
+                self.modal.modal('show');
+            })
+            .fail(function() {
+                base.flash(self.text('load-error'), 'danger');
+                self.restoreTariffSelection();
+            });
+    },
+
+    /**
+     * Inject a tariff form fragment into the modal body.
+     *
+     * @returns {boolean} false when the response is not a tariff form -- an
+     *     expired session redirects to the login page, and jQuery follows the
+     *     redirect, so the login page arrives here with a 200.
+     */
+    renderModal: function(html) {
+        var fragment = $('<div></div>').html(html);
+        if (!fragment.find(FORM_SELECTOR).length) {
+            return false;
+        }
+
+        this.discardEditorModals();
+        this.modal.find('.modal-body').html(fragment.contents());
+        // Move the collection editors out of the tariff modal so Bootstrap can
+        // stack them instead of nesting them.
+        this.modal.find(EDITOR_MODAL_SELECTOR).appendTo('body');
+        this.setupModalWidgets();
+        // Wire up the type toggles and the collection editors; TariffForm's
+        // delegated handlers are namespaced and rebound, so re-rendering the
+        // fragment after a 400 does not double-bind them.
+        new TariffForm.TariffForm();
+        return true;
+    },
+
+    discardEditorModals: function() {
+        $('body').children(EDITOR_MODAL_SELECTOR).remove();
+    },
+
+    setupModalWidgets: function() {
+        this.modal.find('select.select2').select2();
+        this.modal.find('input.numeric').numeric();
+        this.modal.find('.iButton').iButton();
+        this.modal.find('.iButton-icons').iButton({
+            labelOn: "<i class='icon-ok'></i>",
+            labelOff: "<i class='icon-remove'></i>",
+            handleWidth: 30
+        });
+        $(EDITOR_MODAL_SELECTOR).find('input.timepicker').datetimepicker({
+            datepicker: false,
+            closeOnTimeSelect: true,
+            format: 'H:i',
+            mask: '29:00',
+            allowTimes: [
+                '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+                '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+                '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+                '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
+            ]
+        });
+    },
+
+    submitModal: function() {
+        var self = this;
+        var form = this.modal.find(FORM_SELECTOR);
+        // `tariff.name` has no unique constraint, so a second request would
+        // happily create a duplicate tariff.
+        if (!form.length || this.pendingRequestId !== null) {
+            return;
+        }
+
+        var requestId = ++this.requestSeq;
+        this.pendingRequestId = requestId;
+        this.setSaving(true);
+        $.ajax({
+            url: form.attr('action'),
+            method: 'POST',
+            data: form.serialize()
+        }).done(function(data) {
+            if (!self.claimResponse(requestId)) {
+                return;
+            }
+            if (!data || !data.tariff) {
+                self.sessionExpired();
+                return;
+            }
+            self.addTariffOption(data.tariff.id, data.tariff.name);
+            self.previousValue = String(data.tariff.id);
+            self.select.val(self.previousValue);
+            self.modal.modal('hide');
+            base.flash(data.message || self.text('created'), 'success');
+        }).fail(function(xhr) {
+            if (!self.claimResponse(requestId)) {
+                return;
+            }
+            if (xhr.status === 400 && xhr.responseText) {
+                if (!self.renderModal(xhr.responseText)) {
+                    self.sessionExpired();
+                }
+                return;
+            }
+            base.flash(self.text('save-error'), 'danger');
+        });
+    },
+
+    /**
+     * Decide whether a settled request may still touch the meter form.
+     *
+     * @returns {boolean} false when the modal was dismissed while this request
+     *     was in flight, in which case it must not touch the meter form.
+     */
+    claimResponse: function(requestId) {
+        if (this.pendingRequestId !== requestId) {
+            return false;
+        }
+        this.pendingRequestId = null;
+        this.setSaving(false);
+        return true;
+    },
+
+    abortPendingRequest: function() {
+        this.pendingRequestId = null;
+        this.setSaving(false);
+    },
+
+    setSaving: function(saving) {
+        this.saveButton.prop('disabled', saving);
+        this.saveButton.text(saving ? this.text('saving') : this.text('save'));
+    },
+
+    sessionExpired: function() {
+        this.modal.modal('hide');
+        this.restoreTariffSelection();
+        base.flash(this.text('session-expired'), 'danger');
+    },
+
+    addTariffOption: function(value, label) {
+        var option = this.select.find('option[value="' + value + '"]');
+        if (!option.length) {
+            option = $('<option></option>').val(value).text(label);
+            var addNewOption = this.select.find('option[value="' + this.addNewValue + '"]');
+            if (addNewOption.length) {
+                addNewOption.before(option);
+            } else {
+                this.select.append(option);
+            }
+        } else {
+            option.text(label);
+        }
+    },
+
+    restoreTariffSelection: function() {
+        if (this.select.val() !== this.addNewValue) {
+            return;
+        }
+        this.select.val(this.previousValue);
+    },
+
+    currentTariffValue: function() {
+        var value = this.select.val() || BLANK_VALUE;
+        return value === this.addNewValue ? BLANK_VALUE : value;
+    }
+};
diff --git a/sparkmeter/meter/js/meter-tariff-modal.spec.js b/sparkmeter/meter/js/meter-tariff-modal.spec.js
new file mode 100644
index 0000000..b2cd5af
--- /dev/null
+++ b/sparkmeter/meter/js/meter-tariff-modal.spec.js
@@ -0,0 +1,399 @@
+// -*- coding: utf-8 -*-
+// Copyright © 2013-2026 EarthSpark International Corp.
+// All Rights Reserved.
+//
+/* global afterEach,beforeEach,describe,expect,it,jest */
+'use strict';
+
+const MeterTariffModal = require('meter/js/meter-tariff-modal.js');
+
+const ADD_NEW = '__add_new__';
+const BLANK = '__None';
+const MODAL_URL = '/tariff/add-modal';
+
+const TARIFF_ID = '4a2d8cf2-3d61-4a3f-9c4e-0f0f9b1f6c11';
+
+// Cut-down stand-in for the fragment /tariff/add-modal returns: the form, the
+// params element TariffForm reads, one type toggle with its section, and the
+// block-rate editor modal the shared partial emits inside the fragment.
+function fragment() {
+    return (
+        '<form class="form form-horizontal tariff" id="tariff-modal-form"' +
+        '      method="POST" action="' + MODAL_URL + '">' +
+        '  <div id="tariff-form-params"' +
+        '       data-blockrates="[]" data-blockrates-title="&quot;Edit block rate&quot;"' +
+        '       data-tous="[]" data-tous-title="Edit time of use"' +
+        '       data-load-limits="[]" data-load-limits-title="Edit scheduled load limits"></div>' +
+        '  <input id="name" name="name" type="text" value="">' +
+        '  <input id="blockrates" name="blockrates" type="hidden" value="[]">' +
+        '  <input id="tous" name="tous" type="hidden" value="[]">' +
+        '  <input id="load_limits" name="load_limits" type="hidden" value="[]">' +
+        '  <label><input type="radio" name="tariff_type" id="tariff_type" value="flat" checked>Flat</label>' +
+        '  <label><input type="radio" name="tariff_type" id="tariff_type" value="blockrate">Block rate</label>' +
+        '  <div class="form-group tariff_type flat">flat price</div>' +
+        '  <div class="form-group tariff_type blockrate hide">' +
+        '    <table id="tariff-blockrates"><tbody></tbody></table>' +
+        '  </div>' +
+        '  <label><input type="radio" name="load_limit_type" id="load_limit_type" value="flat" checked>Flat</label>' +
+        '  <label><input type="radio" name="load_limit_type" id="load_limit_type" value="scheduled">Scheduled</label>' +
+        '  <div class="form-group load_limit_type flat">flat load limit</div>' +
+        '  <div class="form-group load_limit_type scheduled hide">' +
+        '    <table id="tariff-load-limits"><tbody></tbody></table>' +
+        '  </div>' +
+        '  <input type="checkbox" id="tou_enabled" name="tou_enabled">' +
+        '  <div class="form-group tou hide"><table id="tariff-tous"><tbody></tbody></table></div>' +
+        '  <input type="checkbox" id="plan_enabled" name="plan_enabled">' +
+        '  <div class="form-group plan-price hide">plan price</div>' +
+        '  <div class="form-group plan-fixed-fee hide">plan fixed fee</div>' +
+        '  <input type="checkbox" id="daily_energy_limit_enabled" name="daily_energy_limit_enabled">' +
+        '  <div class="form-group daily-energy-limit-value hide">value</div>' +
+        '  <div class="form-group daily-energy-limit-reset-hour hide">reset hour</div>' +
+        '  <div class="modal" id="blockrateModal"><div class="modal-content">' +
+        '    <input id="id" name="id" type="hidden" value="">' +
+        '    <input id="lower" name="lower" type="text" value="">' +
+        '    <input id="upper" name="upper" type="text" value="">' +
+        '    <input id="value" name="value" type="text" value="">' +
+        '    <button id="save" type="button"></button>' +
+        '  </div></div>' +
+        '  <div class="modal" id="touModal"><div class="modal-content">' +
+        '    <button id="save" type="button"></button>' +
+        '  </div></div>' +
+        '  <div class="modal" id="loadLimitModal"><div class="modal-content">' +
+        '    <button id="save" type="button"></button>' +
+        '  </div></div>' +
+        '</form>'
+    );
+}
+
+const LOGIN_PAGE = '<html><body><form id="login_user_form"><input name="password"></form></body></html>';
+
+function pageHtml() {
+    return (
+        '<div class="alerts"></div>' +
+        '<form id="meter-form">' +
+        '  <div id="meter-tariff-modal-params"' +
+        '       data-modal-url="' + MODAL_URL + '"' +
+        '       data-add-new-value="' + ADD_NEW + '"' +
+        '       data-add-new-label="&lt;Add New&gt;"' +
+        '       data-text-title="Add a New Tariff"' +
+        '       data-text-loading="Loading tariff form..."' +
+        '       data-text-cancel="Cancel"' +
+        '       data-text-save="Save"' +
+        '       data-text-saving="Saving..."' +
+        '       data-text-created="Tariff created."' +
+        '       data-text-load-error="Could not load the tariff form."' +
+        '       data-text-save-error="Could not save the tariff."' +
+        '       data-text-session-expired="Session expired."></div>' +
+        '  <select id="tariff" name="tariff">' +
+        '    <option value="' + BLANK + '">Select a tariff</option>' +
+        '    <option value="11111111-1111-1111-1111-111111111111">Existing</option>' +
+        '  </select>' +
+        '</form>'
+    );
+}
+
+describe('MeterTariffModal', () => {
+    let getDeferred;
+    let ajaxDeferred;
+
+    beforeEach(() => {
+        document.body.innerHTML = pageHtml();
+        document.body.className = '';
+
+        // Widget plugins are attached by startup.js in the browser; the modal
+        // only ever calls them, so no-ops are enough here.
+        ['select2', 'numeric', 'iButton', 'datetimepicker'].forEach((plugin) => {
+            $.fn[plugin] = jest.fn(function() { return this; });
+        });
+
+        getDeferred = $.Deferred();
+        ajaxDeferred = $.Deferred();
+        $.get = jest.fn(() => getDeferred.promise());
+        $.ajax = jest.fn(() => ajaxDeferred.promise());
+    });
+
+    afterEach(() => {
+        $(document).off('.metertariff');
+        $(document).off('.tariffform');
+        document.body.innerHTML = '';
+    });
+
+    function open() {
+        const modal = new MeterTariffModal.MeterTariffModal();
+        $('select#tariff').val(ADD_NEW).trigger('change');
+        return modal;
+    }
+
+    function openWithFragment() {
+        const modal = open();
+        getDeferred.resolve(fragment());
+        return modal;
+    }
+
+    function alerts() {
+        return $('.alerts').text();
+    }
+
+    it('appends the add-new option with its decoded label', () => {
+        new MeterTariffModal.MeterTariffModal();
+
+        const option = $('select#tariff option[value="' + ADD_NEW + '"]');
+        expect(option.length).toBe(1);
+        expect(option.text()).toBe('<Add New>');
+    });
+
+    it('does nothing on a page without the params element', () => {
+        $('#meter-tariff-modal-params').remove();
+        new MeterTariffModal.MeterTariffModal();
+
+        expect($('#meter-tariff-modal').length).toBe(0);
+    });
+
+    it('loads the fragment into the modal when add-new is picked', () => {
+        openWithFragment();
+
+        expect($.get).toHaveBeenCalledWith(MODAL_URL);
+        expect($('#meter-tariff-modal form#tariff-modal-form').length).toBe(1);
+    });
+
+    describe('tariff form behavior inside the modal (F2)', () => {
+        it('reveals the block-rate section when block rate is selected', () => {
+            openWithFragment();
+
+            expect($('#meter-tariff-modal div.tariff_type.blockrate').hasClass('hide')).toBe(true);
+
+            $('#meter-tariff-modal input:radio[value="blockrate"]').prop('checked', true).trigger('change');
+
+            expect($('#meter-tariff-modal div.tariff_type.blockrate').hasClass('hide')).toBe(false);
+            expect($('#meter-tariff-modal div.tariff_type.flat').hasClass('hide')).toBe(true);
+        });
+
+        it('reveals the scheduled load limit section', () => {
+            openWithFragment();
+
+            $('#meter-tariff-modal input:radio[name="load_limit_type"][value="scheduled"]')
+                .prop('checked', true).trigger('change');
+
+            expect($('#meter-tariff-modal div.load_limit_type.scheduled').hasClass('hide')).toBe(false);
+            expect($('#meter-tariff-modal div.load_limit_type.flat').hasClass('hide')).toBe(true);
+        });
+
+        [
+            ['tou_enabled', '.tou'],
+            ['plan_enabled', '.plan-price'],
+            ['plan_enabled', '.plan-fixed-fee'],
+            ['daily_energy_limit_enabled', '.daily-energy-limit-value'],
+            ['daily_energy_limit_enabled', '.daily-energy-limit-reset-hour']
+        ].forEach((toggle) => {
+            const checkbox = toggle[0];
+            const section = toggle[1];
+
+            it('reveals ' + section + ' when ' + checkbox + ' is checked', () => {
+                openWithFragment();
+
+                $('#meter-tariff-modal #' + checkbox).prop('checked', true).trigger('change');
+
+                expect($('#meter-tariff-modal ' + section).hasClass('hide')).toBe(false);
+            });
+        });
+
+        it('populates the hidden collection field from the editor', () => {
+            openWithFragment();
+
+            $('#blockrateModal input#id').val('a-block-rate');
+            $('#blockrateModal input#lower').val('0');
+            $('#blockrateModal input#upper').val('20');
+            $('#blockrateModal input#value').val('1.5');
+            $('#blockrateModal button#save').trigger('click');
+
+            expect($('#meter-tariff-modal #tariff-blockrates tbody tr').length).toBe(1);
+            const blockrates = JSON.parse($('#meter-tariff-modal #blockrates').val());
+            expect(blockrates).toEqual([{id: 'a-block-rate', lower: 0, upper: 20, value: 1.5}]);
+        });
+
+        it('binds the toggles once when the fragment is re-rendered', () => {
+            openWithFragment();
+
+            // A 400 re-renders the fragment; the delegated handlers must not
+            // stack up on `document`.
+            const handlers = () => $._data(document, 'events').change.length;
+            const before = handlers();
+            $('#meter-tariff-modal-save').trigger('click');
+            ajaxDeferred.reject({status: 400, responseText: fragment()});
+
+            expect(handlers()).toBe(before);
+        });
+    });
+
+    describe('nested editors (F5)', () => {
+        it('moves the collection editors out of the tariff modal', () => {
+            openWithFragment();
+
+            ['blockrateModal', 'touModal', 'loadLimitModal'].forEach((id) => {
+                expect($('#meter-tariff-modal #' + id).length).toBe(0);
+                expect($('body').children('#' + id).length).toBe(1);
+            });
+        });
+
+        it('drops editors from a previous render instead of stacking them', () => {
+            openWithFragment();
+            $('#meter-tariff-modal-save').trigger('click');
+            ajaxDeferred.reject({status: 400, responseText: fragment()});
+
+            expect($('body').children('#blockrateModal').length).toBe(1);
+        });
+
+        it('leaves the tariff select alone when an editor closes', () => {
+            openWithFragment();
+            $('select#tariff').val(ADD_NEW);
+
+            $('#blockrateModal').trigger($.Event('hidden.bs.modal', {target: $('#blockrateModal')[0]}));
+
+            expect($('select#tariff').val()).toBe(ADD_NEW);
+        });
+
+        it('keeps the body scroll lock while the tariff modal is still open', () => {
+            openWithFragment();
+            $('#meter-tariff-modal').addClass('in');
+            $(document.body).removeClass('modal-open');
+
+            $('#blockrateModal').trigger($.Event('hidden.bs.modal', {target: $('#blockrateModal')[0]}));
+
+            expect($(document.body).hasClass('modal-open')).toBe(true);
+        });
+    });
+
+    describe('submitting (F4, F8)', () => {
+        it('submits through AJAX when the form is submitted with Enter', () => {
+            openWithFragment();
+
+            const event = $.Event('submit');
+            $('#tariff-modal-form').trigger(event);
+
+            expect(event.isDefaultPrevented()).toBe(true);
+            expect($.ajax).toHaveBeenCalledTimes(1);
+            expect($.ajax.mock.calls[0][0].url).toBe(MODAL_URL);
+            expect($.ajax.mock.calls[0][0].method).toBe('POST');
+        });
+
+        it('refuses a second request while one is in flight', () => {
+            openWithFragment();
+
+            $('#meter-tariff-modal-save').trigger('click');
+            $('#meter-tariff-modal-save').trigger('click');
+            $('#tariff-modal-form').trigger('submit');
+
+            expect($.ajax).toHaveBeenCalledTimes(1);
+            expect($('#meter-tariff-modal-save').prop('disabled')).toBe(true);
+            expect($('#meter-tariff-modal-save').text()).toBe('Saving...');
+        });
+
+        it('adds the created tariff and selects it', () => {
+            openWithFragment();
+            $('#meter-tariff-modal-save').trigger('click');
+
+            ajaxDeferred.resolve({
+                message: 'Tariff created.',
+                tariff: {id: TARIFF_ID, name: 'MODAL TARIFF'}
+            });
+
+            const option = $('select#tariff option[value="' + TARIFF_ID + '"]');
+            expect(option.text()).toBe('MODAL TARIFF');
+            // The created tariff sorts before the add-new option.
+            expect(option.next().val()).toBe(ADD_NEW);
+            expect($('select#tariff').val()).toBe(TARIFF_ID);
+            expect(alerts()).toContain('Tariff created.');
+            expect($('#meter-tariff-modal-save').prop('disabled')).toBe(false);
+        });
+
+        it('ignores a response that arrives after the modal was dismissed', () => {
+            openWithFragment();
+            $('#meter-tariff-modal-save').trigger('click');
+
+            $('#meter-tariff-modal').trigger(
+                $.Event('hidden.bs.modal', {target: $('#meter-tariff-modal')[0]})
+            );
+            ajaxDeferred.resolve({tariff: {id: TARIFF_ID, name: 'MODAL TARIFF'}});
+
+            expect($('select#tariff option[value="' + TARIFF_ID + '"]').length).toBe(0);
+            expect($('select#tariff').val()).toBe(BLANK);
+        });
+
+        it('re-renders the fragment with its errors on a 400', () => {
+            openWithFragment();
+            $('#meter-tariff-modal-save').trigger('click');
+
+            const invalid = fragment().replace(
+                '<input id="name"',
+                '<span class="help-block note">Please set a name for this tariff</span><input id="name"'
+            );
+            ajaxDeferred.reject({status: 400, responseText: invalid});
+
+            expect($('#meter-tariff-modal').text()).toContain('Please set a name for this tariff');
+            expect($('#meter-tariff-modal-save').prop('disabled')).toBe(false);
+        });
+
+        it('reports a failure that is not a validation error', () => {
+            openWithFragment();
+            $('#meter-tariff-modal-save').trigger('click');
+
+            ajaxDeferred.reject({status: 500, responseText: ''});
+
+            expect(alerts()).toContain('Could not save the tariff.');
+        });
+    });
+
+    describe('expired session (F6)', () => {
+        it('does not inject the login page the GET redirected to', () => {
+            open();
+            getDeferred.resolve(LOGIN_PAGE);
+
+            expect($('#meter-tariff-modal #login_user_form').length).toBe(0);
+            expect(alerts()).toContain('Session expired.');
+            expect($('select#tariff').val()).toBe(BLANK);
+        });
+
+        it('does not throw when the POST comes back as a login page', () => {
+            openWithFragment();
+            $('#meter-tariff-modal-save').trigger('click');
+
+            ajaxDeferred.resolve(LOGIN_PAGE);
+
+            expect(alerts()).toContain('Session expired.');
+            expect($('select#tariff').val()).toBe(BLANK);
+        });
+
+        it('reports a failed load', () => {
+            open();
+            getDeferred.reject();
+
+            expect(alerts()).toContain('Could not load the tariff form.');
+            expect($('select#tariff').val()).toBe(BLANK);
+        });
+    });
+
+    describe('restoring the selection (F7)', () => {
+        it('restores the blank option when nothing was selected', () => {
+            open();
+            getDeferred.reject();
+
+            const select = $('select#tariff')[0];
+            expect(select.value).toBe(BLANK);
+            expect(select.selectedIndex).toBe(0);
+        });
+
+        it('restores the previously selected tariff', () => {
+            const existing = '11111111-1111-1111-1111-111111111111';
+            new MeterTariffModal.MeterTariffModal();
+            $('select#tariff').val(existing).trigger('focusin').trigger('change');
+
+            $('select#tariff').val(ADD_NEW).trigger('focusin').trigger('change');
+            getDeferred.resolve(fragment());
+            $('#meter-tariff-modal').trigger(
+                $.Event('hidden.bs.modal', {target: $('#meter-tariff-modal')[0]})
+            );
+
+            expect($('select#tariff').val()).toBe(existing);
+        });
+    });
+});
diff --git a/sparkmeter/meter/meterform.py b/sparkmeter/meter/meterform.py
index 69e2dba..f09b65f 100644
--- a/sparkmeter/meter/meterform.py
+++ b/sparkmeter/meter/meterform.py
@@ -78,6 +78,11 @@ class BaseMeterForm(BaseForm):
     mode = None
     template_filename = "meter-form.html"
 
+    #: Value of the tariff select's "add a new tariff" option. The option is
+    #: added by the browser and opens the tariff modal instead of selecting a
+    #: tariff, so it is never a valid submitted value.
+    ADD_NEW_TARIFF = "__add_new__"
+
     tariff = QuerySelectField(
         _("Tariff"),
         query_factory=lambda: Tariff.query.filter().order_by("name"),
@@ -153,8 +158,14 @@ def validate_customer_national_number(self, field):
             )
 
     def validate_tariff(self, field):
-        """Require a tariff for customer meters with a clear validation message."""
-        if self.meter_type == Meter.TYPE_CUSTOMER and field.data is None:
+        """Require a tariff with a clear validation message.
+
+        The field only exists on customer meters; ``__init__`` deletes it for
+        totalizers.
+        """
+        if field.raw_data and field.raw_data[0] == self.ADD_NEW_TARIFF:
+            raise ValidationError(_("No tariff was created. Please select a tariff or add a new one."))
+        if field.data is None:
             raise ValidationError(_("Please select a tariff or add a new one."))
 
     def save(self, view):
diff --git a/sparkmeter/meter/templates/meter-form.html b/sparkmeter/meter/templates/meter-form.html
index eee51f4..99fc1aa 100644
--- a/sparkmeter/meter/templates/meter-form.html
+++ b/sparkmeter/meter/templates/meter-form.html
@@ -1,3 +1,4 @@
+{%- set page_name = "meter-form" -%}
 {%- if form.mode == 'edit' -%}
 {%- set title = _('Edit %(meter)s', meter=meter.title()) -%}
 {%- else -%}
@@ -15,193 +16,6 @@
 {%- if form.mode == 'edit' -%}
 {% block subtitle %}{{ _('Edit') }}{% endblock %}
 {%- endif -%}
-{% block scripts %}
-  {{ super() }}
-  {% if meter_type == 'customer' %}
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '{{ url_for("tariff.add_modal") }}';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">{{ _("Add a New Tariff") }}</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>{{ _("Loading tariff form...") }}</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">{{ _("Cancel") }}</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">{{ _("Save") }}</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('{{ _("Could not load the tariff form.") }}', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || '{{ _("Tariff created.") }}', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('{{ _("Could not save the tariff.") }}', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
-  {% endif %}
-{% endblock scripts %}
 
 {% block breadcrumbs %}
     {% call breadcrumb(role='operator', url=url_for('ground.index')) %}
@@ -251,6 +65,25 @@
                     </div>
 
                     {%- if meter_type == 'customer' -%}
+                    {#- The modal's behavior lives in meter/js/meter-tariff-modal.js; its
+                        configuration and user-facing strings are carried here. `forceescape`
+                        is required: flask-babel's LazyString defines `__html__`, so a
+                        translated string is otherwise emitted without escaping and a quote
+                        or an angle bracket in a translation would break the attribute. -#}
+                    <div id="meter-tariff-modal-params"
+                         data-modal-url="{{ url_for('tariff.add_modal') }}"
+                         data-add-new-value="{{ form.ADD_NEW_TARIFF }}"
+                         data-add-new-label="{{ _('<Add New>')|forceescape }}"
+                         data-text-title="{{ _('Add a New Tariff')|forceescape }}"
+                         data-text-loading="{{ _('Loading tariff form...')|forceescape }}"
+                         data-text-cancel="{{ _('Cancel')|forceescape }}"
+                         data-text-save="{{ _('Save')|forceescape }}"
+                         data-text-saving="{{ _('Saving...')|forceescape }}"
+                         data-text-created="{{ _('Tariff created.')|forceescape }}"
+                         data-text-load-error="{{ _('Could not load the tariff form.')|forceescape }}"
+                         data-text-save-error="{{ _('Could not save the tariff.')|forceescape }}"
+                         data-text-session-expired="{{ _('Your session has expired. Please reload the page and sign in again.')|forceescape }}">
+                    </div>
                     <div class="form-group{% if form.tariff.errors %} has-error{% endif %}">
                       {{ form.tariff.label(class="control-label col-lg-2") }}
                       <div class="input-group col-lg-10">
diff --git a/sparkmeter/meter/tests/test_meterviews.py b/sparkmeter/meter/tests/test_meterviews.py
index a5b76de..8cf6a65 100644
--- a/sparkmeter/meter/tests/test_meterviews.py
+++ b/sparkmeter/meter/tests/test_meterviews.py
@@ -244,6 +244,47 @@ def test_add_duplicated_serial(self, client):
         assert "Meter serial SM15R-01-0000007B already exists." in response.text
         self.verify_response(response)
 
+    def test_add_customer_meter_tariff_select(self, client):
+        """The select starts blank and offers the modal, which drives the form's markup."""
+        TariffFactory(name="TARIFF")
+        self.session.commit()
+
+        response = client.get("/meter/add-meter")
+
+        # QuerySelectField(allow_blank=True) renders the blank option with this
+        # value; the modal's JavaScript restores the select to it.
+        assert '<option selected value="__None">Select a tariff</option>' in response.text
+        assert 'data-add-new-value="__add_new__"' in response.text
+        assert 'data-add-new-label="&lt;Add New&gt;"' in response.text
+
+    def test_add_customer_meter_without_tariff(self, client):
+        """A customer meter needs a tariff, and says so in the field's error markup."""
+        data = {
+            "serial": "SM15R-01-0000007B",
+            "state": 0,
+        }
+
+        response = client.post("/meter/add-meter", data=data)
+
+        assert response.status_code == http.client.OK
+        assert "Please select a tariff or add a new one." in response.text
+        assert "has-error" in response.text
+        assert not list(self.ground.get_meters())
+
+    def test_add_customer_meter_with_add_new_sentinel(self, client):
+        """The add-new option is a client-side sentinel, never a submittable tariff."""
+        data = {
+            "serial": "SM15R-01-0000007B",
+            "state": 0,
+            "tariff": "__add_new__",
+        }
+
+        response = client.post("/meter/add-meter", data=data)
+
+        assert response.status_code == http.client.OK
+        assert "No tariff was created. Please select a tariff or add a new one." in response.text
+        assert not list(self.ground.get_meters())
+
     def test_add_unknown_model(self, client):
         tariff = TariffFactory()
         self.session.commit()
diff --git a/sparkmeter/tariff/js/tariff-form.js b/sparkmeter/tariff/js/tariff-form.js
index e9b6c9a..7fe0d23 100644
--- a/sparkmeter/tariff/js/tariff-form.js
+++ b/sparkmeter/tariff/js/tariff-form.js
@@ -11,16 +11,23 @@ function TariffForm() {
 
 exports.TariffForm = TariffForm;
 
+// Namespace for the delegated handlers below, so that re-initializing the form
+// -- which the tariff modal does every time it renders the fragment -- rebinds
+// them instead of stacking a second copy on `document`.
+var EVENTS = '.tariffform';
+
 TariffForm.prototype = {
     _init: function() {
-        $(document).on('change', 'input:radio[id^="tariff_type"]', function(event) {
+        $(document).off(EVENTS);
+
+        $(document).on('change' + EVENTS, 'input:radio[id^="tariff_type"]', function(event) {
             $("div.tariff_type").addClass("hide");
             $("div.tariff_type." + $(this).val()).removeClass("hide");
             $("input#tariff_type[value='flat']").attr('checked', $(this).val() === 'flat');
             $("input#tariff_type[value='blockrate']").attr('checked', $(this).val() === 'blockrate');
         });
 
-        $(document).on('change', 'input:radio[id^="load_limit_type"]', function(event) {
+        $(document).on('change' + EVENTS, 'input:radio[id^="load_limit_type"]', function(event) {
             $("div.load_limit_type").addClass("hide");
             $("div.load_limit_type." + $(this).val()).removeClass("hide");
             $("input#load_limit_type[value='flat']").attr('checked', $(this).val() === 'flat');
@@ -32,7 +39,7 @@ TariffForm.prototype = {
             }
         });
 
-        $(document).on('change', 'input:checkbox[id^="tou_enabled"]', function(event) {
+        $(document).on('change' + EVENTS, 'input:checkbox[id^="tou_enabled"]', function(event) {
             if (this.checked) {
                 $(".tou").removeClass("hide");
             } else {
@@ -40,7 +47,7 @@ TariffForm.prototype = {
             }
         });
 
-        $(document).on('change', 'input:checkbox[id^="plan_enabled"]', function(event) {
+        $(document).on('change' + EVENTS, 'input:checkbox[id^="plan_enabled"]', function(event) {
             if (this.checked) {
                 $(".plan-price").removeClass("hide");
                 $(".plan-fixed-fee").removeClass("hide");
@@ -50,7 +57,7 @@ TariffForm.prototype = {
             }
         });
 
-        $(document).on('change', 'input:checkbox[id^="daily_energy_limit_enabled"]', function(event) {
+        $(document).on('change' + EVENTS, 'input:checkbox[id^="daily_energy_limit_enabled"]', function(event) {
             if (this.checked) {
                 $(".daily-energy-limit-reset-hour").removeClass("hide");
                 $(".daily-energy-limit-value").removeClass("hide");
diff --git a/sparkmeter/tariff/templates/tariff-form.html b/sparkmeter/tariff/templates/tariff-form.html
index bd24f0c..4cfdb1e 100644
--- a/sparkmeter/tariff/templates/tariff-form.html
+++ b/sparkmeter/tariff/templates/tariff-form.html
@@ -37,19 +37,6 @@
 
 {% endblock breadcrumbs %}
 
-{% macro form_tariff_error(form, field, class_=None) %}
-  {% if form.errors[field] %}
-  <div class="form-group{{ ' %s'|format(class_) if class_ }}" style="padding-left: 20px; margin-top: -10px">
-    <span class="col-lg-offset-2 help-block note">
-    <i class="icon-warning-sign"></i>
-    {% for error in form.errors[field] %}
-      {{ error }}
-    {% endfor %}
-    </span>
-  </div>
-  {% endif %}
-{% endmacro %}
-
 {% block content %}
   <div class="row">
     <div class="col-md-12">
diff --git a/sparkmeter/tariff/templates/tariff-modal-form.html b/sparkmeter/tariff/templates/tariff-modal-form.html
index b71fb1e..d300e18 100644
--- a/sparkmeter/tariff/templates/tariff-modal-form.html
+++ b/sparkmeter/tariff/templates/tariff-modal-form.html
@@ -1,53 +1,5 @@
 {%- from "_macros.html" import form_errors -%}
 
-{% macro form_tariff_error(form, field, class_=None) %}
-  {% if form.errors[field] %}
-  <div class="form-group{{ ' %s'|format(class_) if class_ }}" style="padding-left: 20px; margin-top: -10px">
-    <span class="col-lg-offset-2 help-block note">
-    <i class="icon-warning-sign"></i>
-    {% for error in form.errors[field] %}
-      {{ error }}
-    {% endfor %}
-    </span>
-  </div>
-  {% endif %}
-{% endmacro %}
-
-<style>
-  #meter-tariff-modal .modal-dialog {
-    width: 900px;
-    max-width: calc(100vw - 40px);
-  }
-
-  #meter-tariff-modal .control-label.col-lg-2 {
-    width: 18%;
-  }
-
-  #meter-tariff-modal .input-group.col-lg-3,
-  #meter-tariff-modal .col-md-5 {
-    width: 52%;
-  }
-
-  #meter-tariff-modal .input-group.col-lg-10,
-  #meter-tariff-modal .btn-group.col-lg-10 {
-    width: 70%;
-  }
-
-  #meter-tariff-modal .input-group .form-control {
-    min-width: 0;
-  }
-
-  @media (max-width: 991px) {
-    #meter-tariff-modal .control-label.col-lg-2,
-    #meter-tariff-modal .input-group.col-lg-3,
-    #meter-tariff-modal .input-group.col-lg-10,
-    #meter-tariff-modal .btn-group.col-lg-10,
-    #meter-tariff-modal .col-md-5 {
-      width: 100%;
-    }
-  }
-</style>
-
 <form class="form form-horizontal tariff" id="tariff-modal-form" method="POST" action="{{ url_for('tariff.add_modal') }}">
   {{ form_errors(form, hiddens='only') }}
   {% include "tariff/_tariff-form-fields.html" %}
diff --git a/sparkmeter/tariff/templates/tariff/_tariff-form-fields.html b/sparkmeter/tariff/templates/tariff/_tariff-form-fields.html
index 1fdd3d6..bcea382 100644
--- a/sparkmeter/tariff/templates/tariff/_tariff-form-fields.html
+++ b/sparkmeter/tariff/templates/tariff/_tariff-form-fields.html
@@ -1,3 +1,16 @@
+{% macro form_tariff_error(form, field, class_=None) %}
+  {% if form.errors[field] %}
+  <div class="form-group{{ ' %s'|format(class_) if class_ }}" style="padding-left: 20px; margin-top: -10px">
+    <span class="col-lg-offset-2 help-block note">
+    <i class="icon-warning-sign"></i>
+    {% for error in form.errors[field] %}
+      {{ error }}
+    {% endfor %}
+    </span>
+  </div>
+  {% endif %}
+{% endmacro %}
+
 <div id="tariff-form-params"
      data-blockrates="{{ form.data.blockrates|tojson|forceescape }}"
      data-blockrates-title="{{ _('Edit block rate')|tojson|forceescape }}"
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add.page b/test-data/meter/test_meterviews-MeterViewTest.test_add.page
index 0fc3e8d..abb8f61 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add.page
@@ -29,189 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -233,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -408,7 +225,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_32_bit_serial.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_32_bit_serial.page
index 0fc3e8d..abb8f61 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_32_bit_serial.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_32_bit_serial.page
@@ -29,189 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -233,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -408,7 +225,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_duplicated_serial.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_duplicated_serial.page
index 518e914..e48496a 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_duplicated_serial.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_duplicated_serial.page
@@ -33,189 +33,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -237,7 +54,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -422,7 +239,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option><option value="00000004-0000-0000-0000-000000000002">tarïff02</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_country_code.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_country_code.page
index cc91b58..ebbc860 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_country_code.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_country_code.page
@@ -33,189 +33,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -237,7 +54,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -415,7 +232,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group has-error">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group has-error">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_phone_number.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_phone_number.page
index 87c27e1..ed3ca53 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_phone_number.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_empty_phone_number.page
@@ -33,189 +33,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -237,7 +54,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -415,7 +232,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group has-error">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group has-error">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_from_cloud.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_from_cloud.page
index 6911773..1ee1f00 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_from_cloud.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_from_cloud.page
@@ -29,189 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -233,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -408,7 +225,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_phone_number.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_phone_number.page
index 98b277e..f9f47ef 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_phone_number.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_phone_number.page
@@ -33,189 +33,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -237,7 +54,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -415,7 +232,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group has-error">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group has-error">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial-invalid-serial.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial-invalid-serial.page
index c5fc215..eae472e 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial-invalid-serial.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial-invalid-serial.page
@@ -33,189 +33,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -237,7 +54,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -422,7 +239,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial.page
index cddb3c4..03edcf5 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_invalid_serial.page
@@ -30,189 +30,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -234,7 +51,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -419,7 +236,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group has-error">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group has-error">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option selected value="__None">Select a tariff</option><option value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer.page
index d0c0aa3..9e52a23 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer.page
@@ -29,7 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -51,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer_from_cloud.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer_from_cloud.page
index 387f84d..e2d461e 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer_from_cloud.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_totalizer_from_cloud.page
@@ -29,7 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -51,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_add_unknown_model.page b/test-data/meter/test_meterviews-MeterViewTest.test_add_unknown_model.page
index fd232f2..32b4b60 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_add_unknown_model.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_add_unknown_model.page
@@ -33,189 +33,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -237,7 +54,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -422,7 +239,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_cloud-customer-state-cloud.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_cloud-customer-state-cloud.page
index cdbffdc..ea27690 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_cloud-customer-state-cloud.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_cloud-customer-state-cloud.page
@@ -29,189 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -233,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -401,7 +218,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_ground-customer-state-ground.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_ground-customer-state-ground.page
index cdbffdc..ea27690 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_ground-customer-state-ground.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_state_ground-customer-state-ground.page
@@ -29,189 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -233,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -401,7 +218,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_tariff_cloud-customer-tariff-cloud.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_tariff_cloud-customer-tariff-cloud.page
index 58782fe..6ee394a 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_tariff_cloud-customer-tariff-cloud.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_customer_tariff_cloud-customer-tariff-cloud.page
@@ -29,189 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -233,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -401,7 +218,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option><option value="00000004-0000-0000-0000-000000000002">tarïff02</option><option value="00000004-0000-0000-0000-000000000003">tarïff03</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_totalizer.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_totalizer.page
index 84a3e19..897127c 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_totalizer.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_totalizer.page
@@ -29,7 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -51,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags-prepopulate.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags-prepopulate.page
index 41614e6..0e67388 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags-prepopulate.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags-prepopulate.page
@@ -28,189 +28,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -232,7 +49,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -405,7 +222,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"><option value="existing-tag">existing-tag</option><option value="new-tag">new-tag</option></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags.page b/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags.page
index bb51492..41b3b26 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_edit_with_tags.page
@@ -29,189 +29,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
-  <script type="text/javascript">
-    (function($) {
-      var ADD_NEW_VALUE = '__add_new__';
-      var MODAL_ID = '#meter-tariff-modal';
-      var MODAL_FORM_URL = '/tariff/add-modal';
-
-      function flashMessage(message, level) {
-        var alerts = $('.alerts');
-        if (!alerts.length) {
-          return;
-        }
-        alerts.append(
-          $('<div></div>')
-            .addClass('alert alert-' + (level || 'info'))
-            .text(message)
-        );
-      }
-
-      function MeterTariffModal() {
-        this.select = $('select#tariff');
-        if (!this.select.length) {
-          return;
-        }
-        this.previousValue = this.select.val() || '';
-        this.ensureSelectOptions();
-        this.ensureModal();
-        this.bindEvents();
-      }
-
-      MeterTariffModal.prototype.bindEvents = function() {
-        var self = this;
-
-        this.select.on('focusin', function() {
-          self.previousValue = self.currentTariffValue();
-        });
-
-        this.select.on('change', function() {
-          if ($(this).val() === ADD_NEW_VALUE) {
-            self.openModal();
-          } else {
-            self.previousValue = self.currentTariffValue();
-          }
-        });
-
-        $(MODAL_ID).on('hidden.bs.modal', function() {
-          self.restoreTariffSelection();
-        });
-
-        $(document).on('click', '#meter-tariff-modal-save', function(event) {
-          event.preventDefault();
-          self.submitModal();
-        });
-      };
-
-      MeterTariffModal.prototype.ensureSelectOptions = function() {
-        if (!this.select.find('option[value="' + ADD_NEW_VALUE + '"]').length) {
-          this.select.append($('<option></option>').val(ADD_NEW_VALUE).text('<Add New>'));
-        }
-      };
-
-      MeterTariffModal.prototype.ensureModal = function() {
-        if ($(MODAL_ID).length) {
-          return;
-        }
-        $('body').append(
-          '<div class="modal fade" id="meter-tariff-modal" tabindex="-1" role="dialog" aria-hidden="true">' +
-          '  <div class="modal-dialog modal-lg">' +
-          '    <div class="modal-content">' +
-          '      <div class="modal-header">' +
-          '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-          '        <h4 class="modal-title">Add a New Tariff</h4>' +
-          '      </div>' +
-          '      <div class="modal-body"><p>Loading tariff form...</p></div>' +
-          '      <div class="modal-footer">' +
-          '        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
-          '        <button type="button" class="btn btn-primary" id="meter-tariff-modal-save">Save</button>' +
-          '      </div>' +
-          '    </div>' +
-          '  </div>' +
-          '</div>'
-        );
-      };
-
-      MeterTariffModal.prototype.openModal = function() {
-        var self = this;
-        $.get(MODAL_FORM_URL)
-          .done(function(html) {
-            self.renderModal(html);
-            $(MODAL_ID).modal('show');
-          })
-          .fail(function() {
-            flashMessage('Could not load the tariff form.', 'danger');
-            self.restoreTariffSelection();
-          });
-      };
-
-      MeterTariffModal.prototype.renderModal = function(html) {
-        $(MODAL_ID).find('.modal-body').html(html);
-        this.setupModalWidgets();
-      };
-
-      MeterTariffModal.prototype.setupModalWidgets = function() {
-        $(MODAL_ID).find('select.select2').select2();
-        $(MODAL_ID).find('input.numeric').numeric();
-        $(MODAL_ID).find('.iButton').iButton();
-        $(MODAL_ID).find('.iButton-icons').iButton({
-          labelOn: "<i class='icon-ok'></i>",
-          labelOff: "<i class='icon-remove'></i>",
-          handleWidth: 30
-        });
-        $(MODAL_ID).find('input.timepicker').datetimepicker({
-          datepicker: false,
-          closeOnTimeSelect: true,
-          format: 'H:i',
-          mask: '29:00',
-          allowTimes: [
-            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
-            '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
-            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
-            '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'
-          ]
-        });
-      };
-
-      MeterTariffModal.prototype.submitModal = function() {
-        var self = this;
-        var form = $(MODAL_ID).find('form#tariff-modal-form');
-        if (!form.length) {
-          return;
-        }
-
-        $.ajax({
-          url: form.attr('action'),
-          method: 'POST',
-          data: form.serialize()
-        }).done(function(data) {
-          self.addTariffOption(data.tariff.id, data.tariff.name);
-          self.previousValue = String(data.tariff.id);
-          self.select.val(self.previousValue);
-          $(MODAL_ID).modal('hide');
-          flashMessage(data.message || 'Tariff created.', 'success');
-        }).fail(function(xhr) {
-          if (xhr.status === 400 && xhr.responseText) {
-            self.renderModal(xhr.responseText);
-            return;
-          }
-          flashMessage('Could not save the tariff.', 'danger');
-        });
-      };
-
-      MeterTariffModal.prototype.addTariffOption = function(value, label) {
-        var option = this.select.find('option[value="' + value + '"]');
-        if (!option.length) {
-          option = $('<option></option>').val(value).text(label);
-          var addNewOption = this.select.find('option[value="' + ADD_NEW_VALUE + '"]');
-          if (addNewOption.length) {
-            addNewOption.before(option);
-          } else {
-            this.select.append(option);
-          }
-        } else {
-          option.text(label);
-        }
-      };
-
-      MeterTariffModal.prototype.restoreTariffSelection = function() {
-        if (this.select.val() !== ADD_NEW_VALUE) {
-          return;
-        }
-        this.select.val(this.previousValue || '');
-      };
-
-      MeterTariffModal.prototype.currentTariffValue = function() {
-        var value = this.select.val() || '';
-        return value === ADD_NEW_VALUE ? '' : value;
-      };
-
-      $(function() {
-        new MeterTariffModal();
-      });
-    })(jQuery);
-  </script>
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -233,7 +50,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -401,7 +218,21 @@
                       <div class="input-group col-lg-10">
                         <select class="form-control tags" id="tags" multiple name="tags"><option value="existing-tag">existing-tag</option></select>
                       </div>
-                    </div><div class="form-group">
+                    </div><div id="meter-tariff-modal-params"
+                         data-modal-url="/tariff/add-modal"
+                         data-add-new-value="__add_new__"
+                         data-add-new-label="&lt;Add New&gt;"
+                         data-text-title="Add a New Tariff"
+                         data-text-loading="Loading tariff form..."
+                         data-text-cancel="Cancel"
+                         data-text-save="Save"
+                         data-text-saving="Saving..."
+                         data-text-created="Tariff created."
+                         data-text-load-error="Could not load the tariff form."
+                         data-text-save-error="Could not save the tariff."
+                         data-text-session-expired="Your session has expired. Please reload the page and sign in again.">
+                    </div>
+                    <div class="form-group">
                       <label class="control-label col-lg-2" for="tariff">Tariff</label>
                       <div class="input-group col-lg-10">
                         <select class="form-control" id="tariff" name="tariff"><option value="__None">Select a tariff</option><option selected value="00000004-0000-0000-0000-000000000001">tarïff01</option></select>
diff --git a/test-data/meter/test_meterviews-MeterViewTest.test_unknown_server_error.page b/test-data/meter/test_meterviews-MeterViewTest.test_unknown_server_error.page
index ede4209..7d37cdb 100644
--- a/test-data/meter/test_meterviews-MeterViewTest.test_unknown_server_error.page
+++ b/test-data/meter/test_meterviews-MeterViewTest.test_unknown_server_error.page
@@ -33,7 +33,6 @@
         <link href="%% APPLICATION_CSS %%" media="screen" rel="stylesheet" type="text/css" />
         <script src="%% VENDOR_JS %%" type="text/javascript"></script>
         <script src="%% APPLICATION_JS %%" type="text/javascript"></script>
-  
 
         <link rel="apple-touch-icon" sizes="57x57" href="/static/logo/apple-touch-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="/static/logo/apple-touch-icon-60x60.png">
@@ -55,7 +54,7 @@
         <meta name="msapplication-TileImage" content="/static/logo/mstile-144x144.png">
         <meta name="theme-color" content="#ffffff">
     </head>
-    <body>
+    <body data-page-name="meter-form">
 
         <nav class="navbar navbar-default navbar-inverse navbar-static-top" role="navigation">
             <!-- Brand and toggle get grouped for better mobile display -->
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add.page
index d8b92b0..ea47c62 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add.page
@@ -202,6 +202,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_form_int_outrange.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_form_int_outrange.page
index cdf2143..9038aac 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_form_int_outrange.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_form_int_outrange.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page
index da516c3..47a85f1 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_modal_get.page
@@ -10,44 +10,9 @@
 < Set-Cookie: %% COOKIE %%
 < Vary: Cookie
 <
-
-<style>
-  #meter-tariff-modal .modal-dialog {
-    width: 900px;
-    max-width: calc(100vw - 40px);
-  }
-
-  #meter-tariff-modal .control-label.col-lg-2 {
-    width: 18%;
-  }
-
-  #meter-tariff-modal .input-group.col-lg-3,
-  #meter-tariff-modal .col-md-5 {
-    width: 52%;
-  }
-
-  #meter-tariff-modal .input-group.col-lg-10,
-  #meter-tariff-modal .btn-group.col-lg-10 {
-    width: 70%;
-  }
-
-  #meter-tariff-modal .input-group .form-control {
-    min-width: 0;
-  }
-
-  @media (max-width: 991px) {
-    #meter-tariff-modal .control-label.col-lg-2,
-    #meter-tariff-modal .input-group.col-lg-3,
-    #meter-tariff-modal .input-group.col-lg-10,
-    #meter-tariff-modal .btn-group.col-lg-10,
-    #meter-tariff-modal .col-md-5 {
-      width: 100%;
-    }
-  }
-</style>
-
 <form class="form form-horizontal tariff" id="tariff-modal-form" method="POST" action="/tariff/add-modal">
   
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_blockrates.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_blockrates.page
index 0bfddcc..64a5b40 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_blockrates.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_blockrates.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[{&#34;lower&#34;: &#34;1&#34;, &#34;upper&#34;: &#34;20&#34;, &#34;value&#34;: &#34;1&#34;}]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_tous.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_tous.page
index b896f2a..4db7654 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_tous.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_add_with_invalid_tous.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-negative-post-error.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-negative-post-error.page
index 64ca680..988d2ec 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-negative-post-error.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-negative-post-error.page
@@ -207,6 +207,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-post-error.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-post-error.page
index e7df0b4..d0ce8fc 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-post-error.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit-edit-post-error.page
@@ -207,6 +207,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit.page
index 74106f6..cc88916 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_edit.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_edit.page
@@ -206,6 +206,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_blockrate.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_blockrate.page
index 3374010..03ca7dc 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_blockrate.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_blockrate.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_duplicate_name.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_duplicate_name.page
index 488f090..9b5013b 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_duplicate_name.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_duplicate_name.page
@@ -202,6 +202,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_empty_name.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_empty_name.page
index 42ccd71..2652f10 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_empty_name.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_empty_name.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_load_limit.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_load_limit.page
index 8742026..cc600db 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_load_limit.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_load_limit.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_monthly_plan_price.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_monthly_plan_price.page
index 4c9755c..1ab550a 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_monthly_plan_price.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_enter_monthly_plan_price.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_existing_duplicate_names.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_existing_duplicate_names.page
index d56b3cb..7b325ed 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_existing_duplicate_names.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_existing_duplicate_names.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_flat_rate.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_flat_rate.page
index a19d19a..67234ca 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_flat_rate.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_flat_rate.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_empty.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_empty.page
index efcafc1..e6b8d80 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_empty.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_empty.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_negative.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_negative.page
index f8298b3..aace06d 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_negative.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_low_balance_negative.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_flat_rate.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_flat_rate.page
index 50c9d3d..850b78d 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_flat_rate.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_flat_rate.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_load_limit.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_load_limit.page
index 28a8241..ebfae4c 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_load_limit.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_negative_load_limit.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_no_scheduled_load_limits.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_no_scheduled_load_limits.page
index 4d576d9..8739e41 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_no_scheduled_load_limits.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_no_scheduled_load_limits.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"
diff --git a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_tous.page b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_tous.page
index cbcdd79..9b271f2 100644
--- a/test-data/tariff/test_tariffviews-TariffViewTest.test_error_tous.page
+++ b/test-data/tariff/test_tariffviews-TariffViewTest.test_error_tous.page
@@ -205,6 +205,7 @@
         </div>
         <div class="box-content padded">
                   <form class="form form-horizontal tariff" method="POST">
+
 <div id="tariff-form-params"
      data-blockrates="[]"
      data-blockrates-title="&#34;Edit block rate&#34;"

From e0f2e73c19a1adfe0bebf62a90ae7f312a52db4a Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 18:20:59 -0400
Subject: [PATCH 05/11] Render the tariff modal's flash messages as text

base.flash builds its alert with jQuery's .html(), so the message the
server returns in the add-modal JSON reached the page as markup. The
inline implementation the module replaced used .text().

Add base.flashText, which builds the same alert from .text(), and have
the tariff modal use it for all four of its messages. base.flash is
shared by the rest of the application and keeps its behavior.
---
 assets/javascripts/base.js                | 15 ++++++++++++---
 assets/javascripts/base.spec.js           | 21 +++++++++++++++++++++
 sparkmeter/meter/js/meter-tariff-modal.js |  8 ++++----
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/assets/javascripts/base.js b/assets/javascripts/base.js
index a7a6d94..5a106fb 100644
--- a/assets/javascripts/base.js
+++ b/assets/javascripts/base.js
@@ -16,9 +16,7 @@ function format_currency(number) {
 }
 exports.format_currency = format_currency;
 
-function flash(msg, category, delay) {
-    var flash = $('<div></div>');
-    flash.html(msg);
+function showAlert(flash, category, delay) {
     flash.addClass('alert');
     flash.hide();
     if (category) {
@@ -30,8 +28,19 @@ function flash(msg, category, delay) {
         flash.delay(delay).fadeOut('slow');
     }
 }
+
+function flash(msg, category, delay) {
+    showAlert($('<div></div>').html(msg), category, delay);
+}
 exports.flash = flash;
 
+// Same alert as flash(), for a message that is not markup -- notably one that
+// came back from the server, which must not be able to inject elements.
+function flashText(msg, category, delay) {
+    showAlert($('<div></div>').text(msg), category, delay);
+}
+exports.flashText = flashText;
+
 var _pageLoaders = {};
 
 function registerPageLoader(pageName, loader) {
diff --git a/assets/javascripts/base.spec.js b/assets/javascripts/base.spec.js
index 0e48e20..38a0996 100644
--- a/assets/javascripts/base.spec.js
+++ b/assets/javascripts/base.spec.js
@@ -45,6 +45,27 @@ describe('base', function() {
             base.flash("testing", "category", 1000);
             expect($(".alerts").html()).toMatchSnapshot();
         });
+        test('should render its message as markup', function() {
+            base.flash("<b>bold</b>");
+            expect($(".alerts b").length).toBe(1);
+        });
+    });
+
+    describe('flashText', function() {
+        test('should add a div to .alerts', function() {
+            base.flashText("testing");
+            expect($(".alerts").html()).toBe(
+                '<div class="alert" style="opacity: 0;">testing</div>');
+        });
+        test('should add an alert-category class', function() {
+            base.flashText("testing", "category", 1000);
+            expect($(".alerts div").hasClass('alert-category')).toBe(true);
+        });
+        test('should render its message as text', function() {
+            base.flashText("<b>bold</b>");
+            expect($(".alerts b").length).toBe(0);
+            expect($(".alerts").text()).toBe("<b>bold</b>");
+        });
     });
 
     describe('getMetaItemProps', function() {
diff --git a/sparkmeter/meter/js/meter-tariff-modal.js b/sparkmeter/meter/js/meter-tariff-modal.js
index e411b38..2fbcc00 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.js
@@ -191,7 +191,7 @@ MeterTariffModal.prototype = {
                 self.modal.modal('show');
             })
             .fail(function() {
-                base.flash(self.text('load-error'), 'danger');
+                base.flashText(self.text('load-error'), 'danger');
                 self.restoreTariffSelection();
             });
     },
@@ -277,7 +277,7 @@ MeterTariffModal.prototype = {
             self.previousValue = String(data.tariff.id);
             self.select.val(self.previousValue);
             self.modal.modal('hide');
-            base.flash(data.message || self.text('created'), 'success');
+            base.flashText(data.message || self.text('created'), 'success');
         }).fail(function(xhr) {
             if (!self.claimResponse(requestId)) {
                 return;
@@ -288,7 +288,7 @@ MeterTariffModal.prototype = {
                 }
                 return;
             }
-            base.flash(self.text('save-error'), 'danger');
+            base.flashText(self.text('save-error'), 'danger');
         });
     },
 
@@ -320,7 +320,7 @@ MeterTariffModal.prototype = {
     sessionExpired: function() {
         this.modal.modal('hide');
         this.restoreTariffSelection();
-        base.flash(this.text('session-expired'), 'danger');
+        base.flashText(this.text('session-expired'), 'danger');
     },
 
     addTariffOption: function(value, label) {

From dabb32989b91920a840e79674763fae13d69561a Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 18:21:12 -0400
Subject: [PATCH 06/11] Restore the tariff modal dialog's width below 992px

The <style> block that moved into modal.scss set the dialog to 900px
with a max-width of calc(100vw - 40px) at every viewport width.
`.modal-lg` applies its 900px only from 992px up, so between 768px and
991px the dialog fell back to Bootstrap's 600px -- where the column
overrides already assume the wider dialog -- and the max-width clamp had
no replacement at all. Set the width in modal.scss and drop `.modal-lg`
from the dialog, leaving one source for it.

Drop ensureModal's adopt branch as well. It returned before setting the
modal title and the cancel and save labels, so reaching it would have
shipped an unlabelled modal; MeterTariffModal is constructed once per
page, so nothing does.
---
 assets/stylesheets/modal.scss             | 10 +++++++++-
 sparkmeter/meter/js/meter-tariff-modal.js | 14 +++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/assets/stylesheets/modal.scss b/assets/stylesheets/modal.scss
index 82b5372..b24fe42 100644
--- a/assets/stylesheets/modal.scss
+++ b/assets/stylesheets/modal.scss
@@ -31,8 +31,16 @@
 
 // The tariff form is a horizontal form laid out for a full-width page. Inside
 // the tariff modal its Bootstrap column widths have to be narrowed to fit the
-// dialog; `.modal-lg` supplies the dialog width itself.
+// dialog.
 #meter-tariff-modal {
+  // Bootstrap's own dialog widths are 600px from 768px up and, with `.modal-lg`,
+  // 900px from 992px up. The tariff form needs the wider dialog at every
+  // viewport, clamped so it still fits a narrow one.
+  .modal-dialog {
+    width: 900px;
+    max-width: calc(100vw - 40px);
+  }
+
   .control-label.col-lg-2 {
     width: 18%;
   }
diff --git a/sparkmeter/meter/js/meter-tariff-modal.js b/sparkmeter/meter/js/meter-tariff-modal.js
index 2fbcc00..36f4d81 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.js
@@ -144,16 +144,12 @@ MeterTariffModal.prototype = {
     },
 
     ensureModal: function() {
-        if ($(MODAL_SELECTOR).length) {
-            this.adoptModal();
-            return;
-        }
         $('body').append(
             $('<div></div>')
                 .addClass('modal fade')
                 .attr({id: MODAL_ID, tabindex: '-1', role: 'dialog', 'aria-hidden': 'true'})
                 .html(
-                    '<div class="modal-dialog modal-lg">' +
+                    '<div class="modal-dialog">' +
                     '  <div class="modal-content">' +
                     '    <div class="modal-header">' +
                     '      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
@@ -168,18 +164,14 @@ MeterTariffModal.prototype = {
                     '</div>'
                 )
         );
-        this.adoptModal();
+        this.modal = $(MODAL_SELECTOR);
+        this.saveButton = this.modal.find('#meter-tariff-modal-save');
         this.modal.find('.modal-title').text(this.text('title'));
         this.modal.find('.modal-body').html($('<p></p>').text(this.text('loading')));
         this.modal.find('.modal-footer .btn-default').text(this.text('cancel'));
         this.saveButton.text(this.text('save'));
     },
 
-    adoptModal: function() {
-        this.modal = $(MODAL_SELECTOR);
-        this.saveButton = this.modal.find('#meter-tariff-modal-save');
-    },
-
     openModal: function() {
         var self = this;
         $.get(this.params.attr('data-modal-url'))

From 505ad0fedcf3fd8934a09d689b477a7f1a7143eb Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 18:21:45 -0400
Subject: [PATCH 07/11] Discard only the editor modals the tariff modal
 relocated

The editor ids come from a shared partial, so clearing them out of <body>
by selector on every render could take out same-id elements owned by
anything else on the page. Keep the elements that were relocated and
remove those, and reach for their time pickers the same way.

BLANK_VALUE's comment described a selectedIndex of -1 the code cannot
produce: a rendered select's val() returns the blank option's value, so
the `|| BLANK_VALUE` fallback could only fire for a null val(). Drop the
fallback and say what the constant is for.
---
 sparkmeter/meter/js/meter-tariff-modal.js     | 21 +++++++++++--------
 .../meter/js/meter-tariff-modal.spec.js       | 11 ++++++----
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/sparkmeter/meter/js/meter-tariff-modal.js b/sparkmeter/meter/js/meter-tariff-modal.js
index 36f4d81..ad2403a 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.js
@@ -13,9 +13,9 @@ var MODAL_ID = 'meter-tariff-modal';
 var MODAL_SELECTOR = '#' + MODAL_ID;
 var FORM_SELECTOR = 'form#tariff-modal-form';
 
-// QuerySelectField(allow_blank=True) renders its blank option with this value.
-// Restoring the select to '' instead would leave selectedIndex at -1 and render
-// the select empty.
+// QuerySelectField(allow_blank=True) renders its blank option with this value,
+// so this is what "no tariff chosen" means to the select. Restoring the select
+// to '' instead would match no option and render it empty.
 var BLANK_VALUE = '__None';
 
 // The tariff form partial emits one editor modal per collection field. Bootstrap
@@ -51,9 +51,10 @@ MeterTariffModal.prototype = {
         }
 
         this.addNewValue = this.params.attr('data-add-new-value');
-        this.previousValue = this.select.val() || BLANK_VALUE;
+        this.previousValue = this.select.val();
         this.requestSeq = 0;
         this.pendingRequestId = null;
+        this.editorModals = $();
 
         this.ensureSelectOptions();
         this.ensureModal();
@@ -204,8 +205,9 @@ MeterTariffModal.prototype = {
         this.discardEditorModals();
         this.modal.find('.modal-body').html(fragment.contents());
         // Move the collection editors out of the tariff modal so Bootstrap can
-        // stack them instead of nesting them.
-        this.modal.find(EDITOR_MODAL_SELECTOR).appendTo('body');
+        // stack them instead of nesting them. Hold on to them: the ids come
+        // from a shared partial, so nothing else identifies them as ours.
+        this.editorModals = this.modal.find(EDITOR_MODAL_SELECTOR).appendTo('body');
         this.setupModalWidgets();
         // Wire up the type toggles and the collection editors; TariffForm's
         // delegated handlers are namespaced and rebound, so re-rendering the
@@ -215,7 +217,8 @@ MeterTariffModal.prototype = {
     },
 
     discardEditorModals: function() {
-        $('body').children(EDITOR_MODAL_SELECTOR).remove();
+        this.editorModals.remove();
+        this.editorModals = $();
     },
 
     setupModalWidgets: function() {
@@ -227,7 +230,7 @@ MeterTariffModal.prototype = {
             labelOff: "<i class='icon-remove'></i>",
             handleWidth: 30
         });
-        $(EDITOR_MODAL_SELECTOR).find('input.timepicker').datetimepicker({
+        this.editorModals.find('input.timepicker').datetimepicker({
             datepicker: false,
             closeOnTimeSelect: true,
             format: 'H:i',
@@ -338,7 +341,7 @@ MeterTariffModal.prototype = {
     },
 
     currentTariffValue: function() {
-        var value = this.select.val() || BLANK_VALUE;
+        var value = this.select.val();
         return value === this.addNewValue ? BLANK_VALUE : value;
     }
 };
diff --git a/sparkmeter/meter/js/meter-tariff-modal.spec.js b/sparkmeter/meter/js/meter-tariff-modal.spec.js
index b2cd5af..508b034 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.spec.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.spec.js
@@ -243,13 +243,16 @@ describe('MeterTariffModal', () => {
             expect($('body').children('#blockrateModal').length).toBe(1);
         });
 
-        it('leaves the tariff select alone when an editor closes', () => {
+        it('leaves an editor it did not relocate alone', () => {
             openWithFragment();
-            $('select#tariff').val(ADD_NEW);
+            // The ids come from a shared partial, so anything else on the page
+            // may carry them too.
+            $('body').append('<div class="modal" id="touModal" data-owner="page"></div>');
 
-            $('#blockrateModal').trigger($.Event('hidden.bs.modal', {target: $('#blockrateModal')[0]}));
+            $('#meter-tariff-modal-save').trigger('click');
+            ajaxDeferred.reject({status: 400, responseText: fragment()});
 
-            expect($('select#tariff').val()).toBe(ADD_NEW);
+            expect($('body').children('#touModal[data-owner="page"]').length).toBe(1);
         });
 
         it('keeps the body scroll lock while the tariff modal is still open', () => {

From b4968222d2040fbd5def8fc014ad425728bcd7d3 Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 18:22:00 -0400
Subject: [PATCH 08/11] Cover the modal stacking and keep the body layout while
 an editor closes

The stacking the module does on show.bs.modal had no test coverage at
all: deleting the binding left the whole suite green. Open an editor
modal on top of the tariff modal and assert the resulting dialog and
backdrop order.

Bootstrap unwinds the body scroll lock as it hides a modal, without
regard for another one still being open: it drops modal-open and hands
back the padding that compensates for the scrollbar the lock hides. The
handler put modal-open back but not the padding, so closing a block
rate, TOU or load limit editor with the tariff modal still open could
shift the page sideways by the scrollbar width. Record the padding on
hide.bs.modal and restore it together with the class.

Drop the event.target check in the tariff modal's own hidden.bs.modal
handler. The three editor modals are relocated to <body> as siblings and
they are the only modals the tariff form partial emits, so nothing
inside the tariff modal can raise the event. The test that appeared to
cover the check asserted that DOM layout rather than the check, and
passed with the check deleted.
---
 sparkmeter/meter/js/meter-tariff-modal.js     | 49 ++++++++-----
 .../meter/js/meter-tariff-modal.spec.js       | 71 ++++++++++++++++++-
 2 files changed, 101 insertions(+), 19 deletions(-)

diff --git a/sparkmeter/meter/js/meter-tariff-modal.js b/sparkmeter/meter/js/meter-tariff-modal.js
index ad2403a..716ca3b 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.js
@@ -55,6 +55,8 @@ MeterTariffModal.prototype = {
         this.requestSeq = 0;
         this.pendingRequestId = null;
         this.editorModals = $();
+        // The body carries no scrollbar compensation until a modal is open.
+        this.scrollbarPad = '';
 
         this.ensureSelectOptions();
         this.ensureModal();
@@ -85,12 +87,7 @@ MeterTariffModal.prototype = {
             }
         });
 
-        this.modal.on('hidden.bs.modal', function(event) {
-            // The editor modals live at the same level in <body>, but guard
-            // anyway so a nested dialog can never drive the outer modal.
-            if (event.target !== this) {
-                return;
-            }
+        this.modal.on('hidden.bs.modal', function() {
             self.abortPendingRequest();
             self.restoreTariffSelection();
         });
@@ -108,17 +105,28 @@ MeterTariffModal.prototype = {
             self.submitModal();
         });
 
-        // Bootstrap 3 keeps a single backdrop and drops `modal-open` off <body>
-        // whenever any modal closes, which breaks the still-open tariff modal.
-        $(document).on('show.bs.modal.metertariff', '.modal', this.onAnyModalShow);
-        $(document).on('hidden.bs.modal.metertariff', '.modal', this.onAnyModalHidden);
+        // Bootstrap 3 gives every modal the same z-index and unwinds the whole
+        // body scroll lock whenever any modal closes, which breaks the tariff
+        // modal while one of its editors is open on top of it.
+        $(document).on('show.bs.modal.metertariff', '.modal', function(event) {
+            self.onAnyModalShow(event.currentTarget);
+        });
+        $(document).on('hide.bs.modal.metertariff', '.modal', function() {
+            self.rememberScrollbarPad();
+        });
+        $(document).on('hidden.bs.modal.metertariff', '.modal', function() {
+            self.onAnyModalHidden();
+        });
     },
 
-    onAnyModalShow: function() {
+    onAnyModalShow: function(modal) {
         // Bootstrap adds `in` after this event, so this counts the modals that
         // are already open underneath the one being shown.
         var zIndex = BASE_MODAL_Z_INDEX + MODAL_Z_INDEX_STEP * $(OPEN_MODAL_SELECTOR).length;
-        $(this).css('z-index', zIndex);
+        $(modal).css('z-index', zIndex);
+        // The backdrop for this modal does not exist yet; Bootstrap appends it
+        // while handling the same event. `modal-stack` marks the ones already
+        // placed, so each new backdrop is the only unmarked one.
         setTimeout(function() {
             $('.modal-backdrop:not(.modal-stack)')
                 .css('z-index', zIndex - BACKDROP_Z_INDEX_OFFSET)
@@ -126,12 +134,21 @@ MeterTariffModal.prototype = {
         }, 0);
     },
 
+    rememberScrollbarPad: function() {
+        // While a modal holds the scroll lock, Bootstrap pads <body> by the
+        // width of the scrollbar it just hid. Read that padding before the
+        // modal being hidden takes it back off.
+        this.scrollbarPad = document.body.style.paddingRight;
+    },
+
     onAnyModalHidden: function() {
-        // Bootstrap drops `modal-open` off <body> whenever any modal closes,
-        // which unlocks scrolling behind a modal that is still open.
-        if ($(OPEN_MODAL_SELECTOR).length) {
-            $(document.body).addClass('modal-open');
+        // Bootstrap drops `modal-open` off <body> and clears the scrollbar
+        // compensation whenever any modal closes, which unlocks scrolling
+        // behind a modal that is still open and shifts the page sideways.
+        if (!$(OPEN_MODAL_SELECTOR).length) {
+            return;
         }
+        $(document.body).addClass('modal-open').css('padding-right', this.scrollbarPad);
     },
 
     ensureSelectOptions: function() {
diff --git a/sparkmeter/meter/js/meter-tariff-modal.spec.js b/sparkmeter/meter/js/meter-tariff-modal.spec.js
index 508b034..a7fab64 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.spec.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.spec.js
@@ -257,13 +257,78 @@ describe('MeterTariffModal', () => {
 
         it('keeps the body scroll lock while the tariff modal is still open', () => {
             openWithFragment();
-            $('#meter-tariff-modal').addClass('in');
-            $(document.body).removeClass('modal-open');
+            $('#blockrateModal').modal('show');
 
-            $('#blockrateModal').trigger($.Event('hidden.bs.modal', {target: $('#blockrateModal')[0]}));
+            $('#blockrateModal').modal('hide');
 
             expect($(document.body).hasClass('modal-open')).toBe(true);
         });
+
+        it('keeps the scrollbar compensation while the tariff modal is still open', () => {
+            openWithFragment();
+            $('#blockrateModal').modal('show');
+            // Bootstrap pads <body> by the width of the scrollbar the scroll
+            // lock hides. jsdom has no layout, so set the padding directly.
+            $(document.body).css('padding-right', '15px');
+
+            // Hiding a modal resets that padding, and re-applying `modal-open`
+            // without it shifts the page sideways by the scrollbar width. The
+            // vendored Bootstrap the jest suite loads is 3.0.0, which has no
+            // scrollbar handling at all, so the reset is played out here.
+            // Bootstrap clears the padding by assigning '', which jsdom ignores.
+            $('#blockrateModal').one('hidden.bs.modal', () => {
+                document.body.style.removeProperty('padding-right');
+            });
+            $('#blockrateModal').modal('hide');
+
+            expect(document.body.style.paddingRight).toBe('15px');
+        });
+    });
+
+    describe('stacked modals (F5)', () => {
+        beforeEach(() => {
+            // The backdrop does not exist yet when the module reacts to
+            // `show.bs.modal`, so it is placed from a zero-delay timeout.
+            jest.useFakeTimers();
+        });
+
+        afterEach(() => {
+            jest.useRealTimers();
+        });
+
+        function zIndexes(selector) {
+            return $(selector).map(function() { return this.style.zIndex; }).get();
+        }
+
+        function openEditorOnTop() {
+            openWithFragment();
+            jest.runAllTimers();
+            $('#blockrateModal').modal('show');
+            jest.runAllTimers();
+        }
+
+        it('raises an editor opened on top of the tariff modal above it', () => {
+            openEditorOnTop();
+
+            expect(zIndexes('#meter-tariff-modal')).toEqual(['1050']);
+            expect(zIndexes('#blockrateModal')).toEqual(['1070']);
+        });
+
+        it('gives each stacked modal its own backdrop just underneath it', () => {
+            openEditorOnTop();
+
+            // Document order: the tariff modal's backdrop, then the editor's.
+            expect(zIndexes('.modal-backdrop')).toEqual(['1040', '1060']);
+        });
+
+        it('leaves a backdrop that was already placed where it is', () => {
+            openEditorOnTop();
+            $('#blockrateModal').modal('hide');
+            $('#touModal').modal('show');
+            jest.runAllTimers();
+
+            expect(zIndexes('.modal-backdrop')).toEqual(['1040', '1060']);
+        });
     });
 
     describe('submitting (F4, F8)', () => {

From 250fb8a310b06c0c91738dc9123b7c1d38bfe94d Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 18:24:54 -0400
Subject: [PATCH 09/11] Report the tariff add-new sentinel as a single form
 error

QuerySelectField.pre_validate reports every primary key it cannot
resolve as "Not a valid choice", and WTForms carries on running the
validation chain after a pre_validate ValidationError. A posted
__add_new__ therefore collected that message and validate_tariff's
accurate one, and the field rendered both stacked together.

Reject the sentinel in the field's own pre_validate with StopValidation,
which carries the accurate message and ends the chain.
---
 sparkmeter/meter/meterform.py             | 27 ++++++++++++++++++-----
 sparkmeter/meter/tests/test_meterviews.py |  3 +++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/sparkmeter/meter/meterform.py b/sparkmeter/meter/meterform.py
index f09b65f..bf42e42 100644
--- a/sparkmeter/meter/meterform.py
+++ b/sparkmeter/meter/meterform.py
@@ -10,7 +10,7 @@
 from markupsafe import Markup
 from werkzeug.utils import redirect
 from wtforms.fields import BooleanField, SelectField, SelectMultipleField, StringField, SubmitField, TelField
-from wtforms.validators import ValidationError
+from wtforms.validators import StopValidation, ValidationError
 from wtforms_sqlalchemy.fields import QuerySelectField, QuerySelectMultipleField
 
 from sparkmeter.config.configdict import config
@@ -71,6 +71,24 @@ def iter_choices(self):
             yield (pk, self.get_label(obj), self.get_label(obj) in self.data, {})
 
 
+class TariffSelectField(QuerySelectField):
+    """Tariff select that reports the modal's add-new sentinel itself.
+
+    ``QuerySelectField.pre_validate`` reports every primary key it cannot
+    resolve as "Not a valid choice", and WTForms carries on running the
+    validation chain after a ``pre_validate`` ``ValidationError``, so the
+    sentinel would collect that message on top of the accurate one. Raising
+    ``StopValidation`` instead carries the accurate message and ends the chain,
+    leaving the field with exactly one error.
+    """
+
+    def pre_validate(self, form):
+        """Reject the add-new sentinel before the choice lookup can mislabel it."""
+        if self.raw_data and self.raw_data[0] == form.ADD_NEW_TARIFF:
+            raise StopValidation(_("No tariff was created. Please select a tariff or add a new one."))
+        super(TariffSelectField, self).pre_validate(form)
+
+
 class BaseMeterForm(BaseForm):
     """Base Meter Form."""
 
@@ -83,7 +101,7 @@ class BaseMeterForm(BaseForm):
     #: tariff, so it is never a valid submitted value.
     ADD_NEW_TARIFF = "__add_new__"
 
-    tariff = QuerySelectField(
+    tariff = TariffSelectField(
         _("Tariff"),
         query_factory=lambda: Tariff.query.filter().order_by("name"),
         get_label="name",
@@ -161,10 +179,9 @@ def validate_tariff(self, field):
         """Require a tariff with a clear validation message.
 
         The field only exists on customer meters; ``__init__`` deletes it for
-        totalizers.
+        totalizers. The add-new sentinel never reaches here: the field's own
+        ``pre_validate`` reports it and stops the chain.
         """
-        if field.raw_data and field.raw_data[0] == self.ADD_NEW_TARIFF:
-            raise ValidationError(_("No tariff was created. Please select a tariff or add a new one."))
         if field.data is None:
             raise ValidationError(_("Please select a tariff or add a new one."))
 
diff --git a/sparkmeter/meter/tests/test_meterviews.py b/sparkmeter/meter/tests/test_meterviews.py
index 8cf6a65..aa49562 100644
--- a/sparkmeter/meter/tests/test_meterviews.py
+++ b/sparkmeter/meter/tests/test_meterviews.py
@@ -283,6 +283,9 @@ def test_add_customer_meter_with_add_new_sentinel(self, client):
 
         assert response.status_code == http.client.OK
         assert "No tariff was created. Please select a tariff or add a new one." in response.text
+        # The sentinel resolves to no tariff, so the choice lookup would
+        # otherwise stack its own message on top of the accurate one.
+        assert "Not a valid choice" not in response.text
         assert not list(self.ground.get_meters())
 
     def test_add_unknown_model(self, client):

From b7a0fb2622f2f4b62e26622ebb5d0496dc6a843d Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 19:30:12 -0400
Subject: [PATCH 10/11] Drop the dead scrollbar-pad handling from the tariff
 modal

The vendored Bootstrap is 3.0.0, whose only body handling is adding and
removing the `modal-open` class. Both the scroll lock `overflow: hidden`
and the `margin-right: 15px` that stands in for the hidden scrollbar are
stylesheet rules keyed on that class, so nothing ever wrote an inline
`padding-right` on <body>. `rememberScrollbarPad` therefore always read
the empty string, and re-applying it was a no-op.

Re-adding `modal-open` when an inner editor closes over a still-open
tariff modal restores both rules, so that stays.

The removed test manufactured the padding reset it then asserted was
undone, so it exercised its own handler rather than Bootstrap.
---
 sparkmeter/meter/js/meter-tariff-modal.js     | 26 +++++++------------
 .../meter/js/meter-tariff-modal.spec.js       | 20 --------------
 2 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/sparkmeter/meter/js/meter-tariff-modal.js b/sparkmeter/meter/js/meter-tariff-modal.js
index 716ca3b..39f90fb 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.js
@@ -55,8 +55,6 @@ MeterTariffModal.prototype = {
         this.requestSeq = 0;
         this.pendingRequestId = null;
         this.editorModals = $();
-        // The body carries no scrollbar compensation until a modal is open.
-        this.scrollbarPad = '';
 
         this.ensureSelectOptions();
         this.ensureModal();
@@ -111,9 +109,6 @@ MeterTariffModal.prototype = {
         $(document).on('show.bs.modal.metertariff', '.modal', function(event) {
             self.onAnyModalShow(event.currentTarget);
         });
-        $(document).on('hide.bs.modal.metertariff', '.modal', function() {
-            self.rememberScrollbarPad();
-        });
         $(document).on('hidden.bs.modal.metertariff', '.modal', function() {
             self.onAnyModalHidden();
         });
@@ -134,21 +129,20 @@ MeterTariffModal.prototype = {
         }, 0);
     },
 
-    rememberScrollbarPad: function() {
-        // While a modal holds the scroll lock, Bootstrap pads <body> by the
-        // width of the scrollbar it just hid. Read that padding before the
-        // modal being hidden takes it back off.
-        this.scrollbarPad = document.body.style.paddingRight;
-    },
-
     onAnyModalHidden: function() {
-        // Bootstrap drops `modal-open` off <body> and clears the scrollbar
-        // compensation whenever any modal closes, which unlocks scrolling
-        // behind a modal that is still open and shifts the page sideways.
+        // Bootstrap drops `modal-open` off <body> whenever any modal closes,
+        // and adding and removing that class is its only body handling -- the
+        // vendored Bootstrap is 3.0.0, which never touches body padding from
+        // JavaScript. What the class carries lives in the stylesheet
+        // (assets/stylesheets/bootstrap/_modals.scss): the scroll lock
+        // `overflow: hidden`, and the flat `margin-right: 15px` that stands in
+        // for the scrollbar the lock hides. So losing the class while a modal
+        // is still open unlocks scrolling behind it and shifts the page 15px
+        // sideways. Putting the class back restores all of it.
         if (!$(OPEN_MODAL_SELECTOR).length) {
             return;
         }
-        $(document.body).addClass('modal-open').css('padding-right', this.scrollbarPad);
+        $(document.body).addClass('modal-open');
     },
 
     ensureSelectOptions: function() {
diff --git a/sparkmeter/meter/js/meter-tariff-modal.spec.js b/sparkmeter/meter/js/meter-tariff-modal.spec.js
index a7fab64..8d518cf 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.spec.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.spec.js
@@ -263,26 +263,6 @@ describe('MeterTariffModal', () => {
 
             expect($(document.body).hasClass('modal-open')).toBe(true);
         });
-
-        it('keeps the scrollbar compensation while the tariff modal is still open', () => {
-            openWithFragment();
-            $('#blockrateModal').modal('show');
-            // Bootstrap pads <body> by the width of the scrollbar the scroll
-            // lock hides. jsdom has no layout, so set the padding directly.
-            $(document.body).css('padding-right', '15px');
-
-            // Hiding a modal resets that padding, and re-applying `modal-open`
-            // without it shifts the page sideways by the scrollbar width. The
-            // vendored Bootstrap the jest suite loads is 3.0.0, which has no
-            // scrollbar handling at all, so the reset is played out here.
-            // Bootstrap clears the padding by assigning '', which jsdom ignores.
-            $('#blockrateModal').one('hidden.bs.modal', () => {
-                document.body.style.removeProperty('padding-right');
-            });
-            $('#blockrateModal').modal('hide');
-
-            expect(document.body.style.paddingRight).toBe('15px');
-        });
     });
 
     describe('stacked modals (F5)', () => {

From 5f422280e8fbce8ce40767977de054ca440f2654 Mon Sep 17 00:00:00 2001
From: Tristan Escalada <355457+tescalada@users.noreply.github.com>
Date: Mon, 20 Jul 2026 20:13:02 -0400
Subject: [PATCH 11/11] Use an SPDX identifier on the new tariff modal sources

---
 sparkmeter/meter/js/meter-tariff-modal.js      | 2 +-
 sparkmeter/meter/js/meter-tariff-modal.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/sparkmeter/meter/js/meter-tariff-modal.js b/sparkmeter/meter/js/meter-tariff-modal.js
index 39f90fb..ace993f 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.js
@@ -1,6 +1,6 @@
 // -*- coding: utf-8 -*-
 // Copyright © 2013-2026 EarthSpark International Corp.
-// All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
 //
 // Lets the customer meter form create a tariff without leaving the page: the
 // tariff select carries an extra option that loads /tariff/add-modal into a
diff --git a/sparkmeter/meter/js/meter-tariff-modal.spec.js b/sparkmeter/meter/js/meter-tariff-modal.spec.js
index 8d518cf..976f503 100644
--- a/sparkmeter/meter/js/meter-tariff-modal.spec.js
+++ b/sparkmeter/meter/js/meter-tariff-modal.spec.js
@@ -1,6 +1,6 @@
 // -*- coding: utf-8 -*-
 // Copyright © 2013-2026 EarthSpark International Corp.
-// All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
 //
 /* global afterEach,beforeEach,describe,expect,it,jest */
 'use strict';