Making invalid inputs select themselves when validation fails

MeoMix · May 20, 2015 · d27f379 · d27f379
1 parent c7d831a
commit d27f379
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/js/foreground/view/dialog/createPlaylistView.js b/src/js/foreground/view/dialog/createPlaylistView.js
@@ -59,6 +59,16 @@
             this.ui.title.focus().val(this.ui.title.val());
         },
 
+        onValidationFailed: function() {
+            var titleValid = this.model.get('titleValid');
+
+            if (!titleValid) {
+                this.ui.title.focus();
+            } else {
+                this.ui.dataSource.focus();
+            }
+        },
+
         createPlaylist: function() {
             var trimmedTitle = this._getTrimmedTitle();
 

diff --git a/src/js/foreground/view/dialog/dialogView.js b/src/js/foreground/view/dialog/dialogView.js
@@ -151,6 +151,8 @@
                 }
 
                 this._hide();
+            } else {
+                this.contentView.triggerMethod('ValidationFailed');
             }
         },
 

diff --git a/src/js/foreground/view/dialog/editPlaylistView.js b/src/js/foreground/view/dialog/editPlaylistView.js
@@ -36,7 +36,12 @@
         },
 
         onAttach: function() {
-            this._focusInput();
+            //  Reset val to prevent text from becoming highlighted.
+            this.ui.title.focus().val(this.ui.title.val());
+        },
+
+        onValidationFailed: function() {
+            this.ui.title.focus();
         },
 
         editPlaylist: function() {
@@ -54,11 +59,6 @@
             this._validateTitle();
         },
 
-        _focusInput: function() {
-            //  Reset val to prevent text from becoming highlighted.
-            this.ui.title.focus().val(this.ui.title.val());
-        },
-
         _validateTitle: function() {
             //  When the user submits - check to see if they provided a playlist name
             var trimmedTitle = this._getTrimmedTitle();