Issue #2488884 by pixelmord, tim.plunkett, droplet: Machine name HTML5...

Issue #2488884 by pixelmord, tim.plunkett, droplet: Machine name HTML5 validation fails when field is hidden

core/misc/machine-name.js

@@ -34,8 +34,7 @@
 
       function clickEditHandler(e) {
         var data = e.data;
-        e.preventDefault();
-        data.$wrapper.show();
+        data.$wrapper.removeClass('visually-hidden');
         data.$target.trigger('focus');
         data.$suffix.hide();
         data.$source.off('.machineName');
@@ -94,7 +93,7 @@
         // Figure out the maximum length for the machine name.
         options.maxlength = $target.attr('maxlength');
         // Hide the form item container of the machine name form element.
-        $wrapper.hide();
+        $wrapper.addClass('visually-hidden');
         // Determine the initial machine name value. Unless the machine name form
         // element is disabled or not empty, the initial default value is based on
         // the human-readable form element value.
@@ -137,6 +136,10 @@
             // Initialize machine name preview.
             .trigger('keyup');
         }
+
+        // Add a listener for an invalid event on the machine name input
+        // to show its container and focus it.
+        $target.on('invalid', eventData, clickEditHandler);
       });
     },