diff --git a/core/modules/system/js/system.date.js b/core/modules/system/js/system.date.js
index 7ed29a8..7ba36e0 100644
--- a/core/modules/system/js/system.date.js
+++ b/core/modules/system/js/system.date.js
@@ -10,15 +10,10 @@
       var $context = $(context);
       var $source = $context.find('.date-formatter');
       var $target = $context.find('#edit-date-format-suffix');
-
       // All elements have to exist.
       if (!$source.length || !$target.length) {
         return;
       }
-      // Skip processing upon a form validation error on the machine name.
-      if ($source.hasClass('error')) {
-        return;
-      }
       var dateFormats = settings.dateFormats;
       var eventData = {
         $source: $source,
@@ -47,14 +42,12 @@
         var data = e.data;
         var baseValue = $(e.target).val();
         var dateString = baseValue.replace(/\\?(.?)/gi, replaceCallback);
+
         if (dateString.length) {
           $(data.$target).show();
           if ($('em', $(data.$target)).length) {
             $('em', $(data.$target)).html(dateString);
           }
-          else {
-            $(data.$target).html(dateString);
-          }
         }
         else {
           $(data.$target).hide();
diff --git a/core/modules/system/src/Form/DateFormatEditForm.php b/core/modules/system/src/Form/DateFormatEditForm.php
index b324667..f8e780f 100644
--- a/core/modules/system/src/Form/DateFormatEditForm.php
+++ b/core/modules/system/src/Form/DateFormatEditForm.php
@@ -17,6 +17,19 @@ class DateFormatEditForm extends DateFormatFormBase {
   /**
    * {@inheritdoc}
    */
+  public function form(array $form, FormStateInterface $form_state) {
+    $form = parent::form($form, $form_state);
+
+    $now = t('Displayed as %date', array('%date' => $this->dateFormatter->format(REQUEST_TIME, $this->entity->id())));
+    $form['date_format_pattern']['#field_suffix'] = ' <small id="edit-date-format-suffix">' . $now . '</small>';
+    $form['date_format_pattern']['#default_value'] = $this->entity->getPattern();
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   protected function actions(array $form, FormStateInterface $form_state) {
     $actions = parent::actions($form, $form_state);
     $actions['submit']['#value'] = t('Save format');
diff --git a/core/modules/system/src/Form/DateFormatFormBase.php b/core/modules/system/src/Form/DateFormatFormBase.php
index d756b7e..0c46500 100644
--- a/core/modules/system/src/Form/DateFormatFormBase.php
+++ b/core/modules/system/src/Form/DateFormatFormBase.php
@@ -102,18 +102,16 @@ public function form(array $form, FormStateInterface $form_state) {
         'error' => $this->t('The machine-readable name must be unique, and can only contain lowercase letters, numbers, and underscores. Additionally, it can not be the reserved word "custom".'),
       ),
     );
-    $now = t('Displayed as %date', array('%date' => $this->dateFormatter->format(REQUEST_TIME, $this->entity->id())));
     $form['date_format_pattern'] = array(
       '#type' => 'textfield',
       '#title' => t('Format string'),
       '#maxlength' => 100,
       '#description' => $this->t('A user-defined date format. See the <a href="@url">PHP manual</a> for available options.', array('@url' => 'http://php.net/manual/function.date.php')),
-      '#default_value' => $this->entity->getPattern(),
       '#required' => TRUE,
       '#attributes' => array(
         'class' => array('date-formatter'),
       ),
-      '#field_suffix' => ' <small id="edit-date-format-suffix">' . $now . '</small>',
+      '#field_suffix' => ' <small id="edit-date-format-suffix">Displayed as <em></em></small>',
     );
 
     $form['langcode'] = array(