Merge pull request #24 from mtozzo/feature-disable-html5-validation

Adds a "Disable HTML5 Validation" feature.
chrispederick · Dec 20, 2016 · 50e830d · 50e830d
2 parents d0a0cc4 + 6cf9f96
commit 50e830d
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 2 deletions.
diff --git a/source/chrome/html/overlay/overlay.html b/source/chrome/html/overlay/overlay.html
@@ -89,24 +89,25 @@
       <li><a href="#" id="clear-radio-buttons"><span></span></a></li>
       <li><a href="#" id="convert-form-gets-to-posts"><span></span></a></li>
       <li><a href="#" id="convert-form-posts-to-gets"><span></span></a></li>
+      <li><a href="#" id="convert-select-elements-to-text-inputs"><span></span></a></li>
     </ul>
 
     <ul class="list-unstyled">
-      <li><a href="#" id="convert-select-elements-to-text-inputs"><span></span></a></li>
       <li><a href="#" id="convert-text-inputs-to-textareas"><span></span></a></li>
       <li><a href="#" id="display-form-details"><span></span></a></li>
       <li><a href="#" id="display-passwords"><span></span></a></li>
       <li><a href="#" id="enable-auto-completion"><span></span></a></li>
       <li><a href="#" id="enable-form-fields"><span></span></a></li>
+      <li><a href="#" id="expand-select-elements"><span></span></a></li>
     </ul>
 
     <ul class="list-unstyled">
-      <li><a href="#" id="expand-select-elements"><span></span></a></li>
       <li><a href="#" id="make-form-fields-writable"><span></span></a></li>
       <li><a href="#" id="outline-form-fields-without-labels"><span></span></a></li>
       <li><a href="#" id="populate-form-fields"><span></span></a></li>
       <li><a href="#" id="remove-maximum-lengths"><span></span></a></li>
       <li><a href="#" id="view-form-information"><span></span></a></li>
+      <li><a href="#" id="disable-form-validation"><span></span></a></li>
     </ul>
   </div>
 

diff --git a/source/chrome/javascript/overlay/forms.js b/source/chrome/javascript/overlay/forms.js
@@ -23,6 +23,7 @@ $(function()
   $("#remove-maximum-lengths").append(WebDeveloper.Locales.getString("removeMaximumLengths")).on("click", WebDeveloper.Overlay.Forms.removeMaximumLengths);
   $("#uncheck-all-checkboxes").append(WebDeveloper.Locales.getString("uncheckAllCheckboxes")).on("click", WebDeveloper.Overlay.Forms.uncheckAllCheckboxes);
   $("#view-form-information").append(WebDeveloper.Locales.getString("viewFormInformation")).on("click", WebDeveloper.Overlay.Forms.viewFormInformation);
+  $("#disable-form-validation").append(WebDeveloper.Locales.getString("disableFormValidation")).on("click", WebDeveloper.Overlay.Forms.disableFormValidation);
 });
 
 // Adds a feature on a tab
@@ -298,3 +299,18 @@ WebDeveloper.Overlay.Forms.viewFormInformation = function()
     }
   });
 };
+
+// Disables HTML5 validation
+WebDeveloper.Overlay.Forms.disableFormValidation = function()
+{
+  var featureItem = $(this);
+
+  WebDeveloper.Overlay.getSelectedTab(function(tab)
+  {
+    // If the tab is valid
+    if(WebDeveloper.Overlay.isValidTab(tab))
+    {
+      WebDeveloper.Overlay.Forms.addFeatureOnTab(featureItem, tab, "WebDeveloper.Forms.disableFormValidation([document]);");
+    }
+  });
+};
diff --git a/source/chrome/locales/en_US/messages.json b/source/chrome/locales/en_US/messages.json
@@ -124,6 +124,9 @@
   "removeMaximumLengths": { "message": "Remove Maximum Lengths" },
   "uncheckAllCheckboxes": { "message": "Uncheck All Checkboxes" },
   "viewFormInformation": { "message": "View Form Information" },
+  "disableFormValidation": { "message": "Disable HTML5 Validation" },
+  "disableFormValidationSingleResult": { "message": "1 validation element was disabled." },
+  "disableFormValidationMultipleResult": { "message": "$count$ validation elements were disabled.", "placeholders": { "count": { "content": "$1" } } },
 
   "disableImages": { "message": "Disable Images" },
   "displayAltAttributes": { "message": "Display Alt Attributes" },

diff --git a/source/common/javascript/features/forms.js b/source/common/javascript/features/forms.js
@@ -1019,3 +1019,61 @@ WebDeveloper.Forms.toggleCheckboxes = function(check, documents)
     }
   }
 };
+
+// Removes all HTML5 validation properties
+WebDeveloper.Forms.disableFormValidation = function(documents)
+{
+  var attributeElements = null;
+  var inputTypeElements = null;
+  var validationRemovedElements = 0;
+
+  for(var i = 0, l = documents.length; i < l; i++)
+  {
+    attributeElements = documents[i].querySelectorAll("[required], [pattern], [min], [max]");
+
+    for(var j = 0, m = attributeElements.length; j < m; j++)
+    {
+      if(attributeElements[j].hasAttribute("required"))
+      {
+        attributeElements[j].removeAttribute("required");
+        validationRemovedElements++;
+      }
+
+      if(attributeElements[j].hasAttribute("pattern"))
+      {
+        attributeElements[j].removeAttribute("pattern");
+        validationRemovedElements++;
+      }
+
+      if(attributeElements[j].hasAttribute("min"))
+      {
+        attributeElements[j].removeAttribute("min");
+        validationRemovedElements++;
+      }
+
+      if(attributeElements[j].hasAttribute("max"))
+      {
+        attributeElements[j].removeAttribute("max");
+        validationRemovedElements++;
+      }
+    }
+
+    inputTypeElements = documents[i].querySelectorAll("input[type=email], input[type=url], input[type=number], input[type=range]");
+
+    for(var k = 0, n = inputTypeElements.length; k < n; k++)
+    {
+      inputTypeElements[k].type = "text";
+
+      validationRemovedElements++;
+    }
+  }
+
+  if(validationRemovedElements == 1)
+  {
+    WebDeveloper.Common.displayNotification("disableFormValidationSingleResult");
+  }
+  else
+  {
+    WebDeveloper.Common.displayNotification("disableFormValidationMultipleResult", [validationRemovedElements]);
+  }
+};
diff --git a/source/firefox/javascript/overlay/forms.js b/source/firefox/javascript/overlay/forms.js
@@ -117,3 +117,9 @@ WebDeveloper.Overlay.Forms.viewFormInformation = function()
 {
   WebDeveloper.Overlay.openGeneratedTab(WebDeveloper.Common.getChromeURL("generated/view-form-information.html"), WebDeveloper.Content.getForms(), WebDeveloper.Overlay.Forms.getViewFormInformationLocale());
 };
+
+// Disables HTML5 validation on all form fields
+WebDeveloper.Overlay.Forms.disableFormValidation = function()
+{
+  WebDeveloper.Forms.disableFormValidation(WebDeveloper.Content.getDocuments(WebDeveloper.Common.getContentWindow()));
+};
diff --git a/source/firefox/locales/en-US/overlay/overlay.dtd b/source/firefox/locales/en-US/overlay/overlay.dtd
@@ -182,6 +182,8 @@
 <!ENTITY webdeveloper.toggle.checkboxes.key "h">
 <!ENTITY webdeveloper.view.form.information.label "View Form Information">
 <!ENTITY webdeveloper.view.form.information.key "V">
+<!ENTITY webdeveloper.disable.form.validation.label "Disable HTML5 Validation">
+<!ENTITY webdeveloper.disable.form.validation.key "a">
 
 <!-- Convert Form Methods Features -->
 <!ENTITY webdeveloper.convert.gets.posts.label "Convert GETs To POSTs">

diff --git a/source/firefox/locales/en-US/overlay/overlay.properties b/source/firefox/locales/en-US/overlay/overlay.properties
@@ -335,3 +335,7 @@ responsiveLayouts=Responsive Layouts
 
 # View Source With
 viewSourceWith=View Source With
+
+# Make Form Fields Writable
+disableFormValidationMultipleResult=%S validation elements were disabled.
+disableFormValidationSingleResult=1 validation element was disabled.
diff --git a/source/firefox/xul/overlay/menus/forms.xul b/source/firefox/xul/overlay/menus/forms.xul
@@ -29,4 +29,6 @@
   </menu>
   <menuseparator id="web-developer-forms-separator4-${suffix}"/>
   <menuitem id="web-developer-view-form-information-${suffix}" command="web-developer-view-form-information-command"/>
+  <menuseparator id="web-developer-forms-separator5-${suffix}"/>
+  <menuitem id="web-developer-disable-form-validation-${suffix}" command="web-developer-disable-form-validation-command"/>
 </menupopup>
diff --git a/source/firefox/xul/overlay/overlay.xul b/source/firefox/xul/overlay/overlay.xul
@@ -83,6 +83,7 @@
     <command id="web-developer-check-all-checkboxes-command" class="web-developer-feature-command" accesskey="&webdeveloper.check.all.checkboxes.key;" label="&webdeveloper.check.all.checkboxes.label;" oncommand="WebDeveloper.Overlay.Forms.toggleCheckboxes(true)"/>
     <command id="web-developer-uncheck-all-checkboxes-command" class="web-developer-feature-command" accesskey="&webdeveloper.uncheck.all.checkboxes.key;" label="&webdeveloper.uncheck.all.checkboxes.label;" oncommand="WebDeveloper.Overlay.Forms.toggleCheckboxes(false)"/>
     <command id="web-developer-view-form-information-command" class="web-developer-feature-command" accesskey="&webdeveloper.view.form.information.key;" label="&webdeveloper.view.form.information.label;" oncommand="WebDeveloper.Overlay.Forms.viewFormInformation()"/>
+    <command id="web-developer-disable-form-validation-command" class="web-developer-feature-command" accesskey="&webdeveloper.disable.form.validation.key;" label="&webdeveloper.disable.form.validation.label;" oncommand="WebDeveloper.Overlay.Forms.disableFormValidation()"/>
 
     <command id="web-developer-disable-all-images-command" class="web-developer-feature-command" accesskey="&webdeveloper.disable.all.images.key;" label="&webdeveloper.disable.all.images.label;" oncommand="WebDeveloper.Overlay.Images.disableImages(this)"/>
     <command id="web-developer-disable-external-site-images-command" class="web-developer-feature-command" accesskey="&webdeveloper.disable.external.site.images.key;" label="&webdeveloper.disable.external.site.images.label;" oncommand="WebDeveloper.Overlay.Images.disableExternalSiteImages(this)"/>