Issue 3892 - Disable button if input is invalid when adding subscriptions or filters

options.js

Index: options.js
===================================================================
--- a/options.js
+++ b/options.js
@@ -671,6 +671,16 @@
     }
   }
 
+  function disableButtonWhenInvalid(button, input)
+  {
+    function checkValidity()
+    {
+      button.disabled = !input.checkValidity();
+    }
+    checkValidity();
+    input.addEventListener("input", checkValidity, false);
+  }
+
   function onDOMLoaded()
   {
     populateLists();
@@ -720,9 +730,14 @@
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
+    var findLanuage = E("find-language");
     var placeholderValue  = getMessage("options_dialog_language_find");
-    E("find-language").setAttribute("placeholder", placeholderValue);
-    E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
+    findLanuage.setAttribute("placeholder", placeholderValue);
+    findLanuage.addEventListener("keyup", onFindLanguageKeyUp, false);
+    disableButtonWhenInvalid(
+      document.querySelector("[data-action=import-subscription]"),
+      E("blockingList-textbox")
+    );
     E("whitelisting-textbox").addEventListener("keypress", function(e)
     {
       if (getKey(e) == "Enter")
@@ -760,11 +775,14 @@
       ));
     });
 
-    var filterTextbox = document.querySelector("#custom-filters-add input");
+    var filterControl = E("custom-filters-add");
+    var filterTextbox = filterControl.querySelector("input");
     placeholderValue = getMessage("options_customFilters_textbox_placeholder");
     filterTextbox.setAttribute("placeholder", placeholderValue);
-    function addCustomFilters()
+    disableButtonWhenInvalid(filterControl.querySelector("button"), filterTextbox);
+    filterControl.addEventListener("submit", function(e)
     {
+      e.preventDefault();
       var filterText = filterTextbox.value;
       sendMessageHandleErrors(
       {
@@ -775,11 +793,6 @@
       {
         filterTextbox.value = "";
       });
-    }
-    E("custom-filters-add").addEventListener("submit", function(e)
-    {
-      e.preventDefault();
-      addCustomFilters();
     }, false);
     var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");
 
@@ -831,6 +844,7 @@
     dialog.setAttribute("aria-hidden", true);
     dialog.removeAttribute("aria-labelledby");
     document.body.removeAttribute("data-dialog");
+    E("blockingList-textbox").value = "";

[Sebastian Noack, 2016/04/06 22:46:01]

This is kinda unrelated, but it seems to have been another bug that when you add
a subscription (or cancelled the dialog), and reopen the dialog to add another
subscription, that the previous URL is still showing. 

     focusedBeforeDialog.focus();
   }