Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 08:36:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Julian Lam
2022-11-23 17:23:04 -05:00
parent e1238a5822
commit dadbcd731c
3 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/src/admin/settings.js
View File

@@ -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({

26
public/src/modules/settings.js
View File

@@ -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);
},
};

2
src/views/admin/settings/advanced.tpl
View File

@@ -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">