feat: integrating basic client-side form validity checking in settings v1 and v2

public/src/admin/settings.js

@@ -1,7 +1,7 @@
 'use strict';
 
 
-define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts'], function (uploader, mousetrap, hooks, alerts) {
+define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts', 'settings'], function (uploader, mousetrap, hooks, alerts, settings) {
 	const Settings = {};
 
 	Settings.populateTOC = function () {
@@ -66,6 +66,11 @@ define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts'], function
 		saveBtn.off('click').on('click', function (e) {
 			e.preventDefault();
 
+			const ok = settings.check(document.querySelectorAll('#content [data-field][pattern]'));
+			if (!ok) {
+				return;
+			}
+
 			saveFields(fields, function onFieldsSaved(err) {
 				if (err) {
 					return alerts.alert({

public/src/modules/settings.js

@@ -517,6 +517,12 @@ define('settings', ['hooks', 'alerts'], function (hooks, alerts) {
 		save: function (hash, formEl, callback) {
 			formEl = $(formEl);
 
+			const controls = formEl.get(0).querySelectorAll('input[name][pattern]');
+			const ok = Settings.check(controls);
+			if (!ok) {
+				return;
+			}
+
 			if (formEl.length) {
 				const values = helper.serializeForm(formEl);
 
@@ -559,6 +565,26 @@ define('settings', ['hooks', 'alerts'], function (hooks, alerts) {
 				});
 			}
 		},
+		check: function (controls) {
+			const onTrigger = (e) => {
+				const wrapper = e.target.closest('.form-group');
+				if (wrapper) {
+					wrapper.classList.add('has-error');
+				}
+
+				e.target.removeEventListener('invalid', onTrigger);
+			};
+
+			return Array.prototype.map.call(controls, (controlEl) => {
+				const wrapper = controlEl.closest('.form-group');
+				if (wrapper) {
+					wrapper.classList.remove('has-error');
+				}
+
+				controlEl.addEventListener('invalid', onTrigger);
+				return controlEl.reportValidity();
+			}).every(Boolean);
+		},
 	};
 
 

src/views/admin/settings/advanced.tpl

@@ -121,7 +121,7 @@
 			</div>
 			<div class="form-group">
 				<label for="hsts-maxage">[[admin/settings/advanced:hsts.maxAge]]</label>
-				<input class="form-control" id="hsts-maxage" type="number" placeholder="31536000" data-field="hsts-maxage" /><br />
+				<input class="form-control" id="hsts-maxage" type="text" pattern="\d+" placeholder="31536000" data-field="hsts-maxage" /><br />
 			</div>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">