From bb232776b32af9423e7ba60af03424c6041b1ec6 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 10 Jun 2021 12:26:44 +0200 Subject: [PATCH] Add warning message when invalid answers in the form --- www/form/app-form.less | 16 ++++++++- www/form/inner.js | 79 +++++++++++++++++++++++++++++++++++++----- 2 files changed, 85 insertions(+), 10 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index b8d5785ca..25fac542c 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -205,6 +205,15 @@ margin-right: 10px; } } + .cp-form-invalid-warning { + color: @cp_form-invalid; + ul { + list-style-type: disclosure-closed; + } + li { + text-align: left; + } + } } .cp-form-page-container { @@ -261,6 +270,10 @@ .cp-form-block-question { margin-bottom: 5px; + .cp-form-block-question-number { + font-weight: bold; + margin-right: 10px; + } } .cp-form-block-content { overflow-x: auto; @@ -278,7 +291,8 @@ justify-content: space-between; } input:invalid { - border: 1px solid @cp_form-invalid; + border: 2px solid @cp_form-invalid; + color: @cp_form-invalid; } media-tag { & > * { diff --git a/www/form/inner.js b/www/form/inner.js index d160c4b51..00c469d58 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -96,6 +96,8 @@ define([ Messages.form_text_url = "URL"; Messages.form_text_email = "Email"; Messages.form_text_number = "Number"; + Messages.form_input_ph_url = "Enter a URL here"; + Messages.form_input_ph_email = "Email address"; Messages.form_default = "Your question here?"; Messages.form_type_input = "Text"; // XXX @@ -119,9 +121,13 @@ define([ Messages.form_submit = "Submit"; Messages.form_update = "Update"; + Messages.form_submitWarning = "Submit anyway"; + Messages.form_updateWarning = "Update anyway"; Messages.form_reset = "Reset"; Messages.form_sent = "Sent"; Messages.form_delete = "Delete"; + Messages.form_invalidWarning = "There are errors in some answers:"; + Messages.form_invalidQuestion = "Question {0}"; Messages.form_cantFindAnswers = "Unable to retrieve your existing answers for this form."; Messages.form_answered = "You already answered this form"; @@ -169,9 +175,7 @@ define([ Messages.form_addMultipleHint = "Add multiple dates and times" Messages.form_clear = "Clear"; - Messages.form_page_prev = "Previous"; Messages.form_page = "Page {0}/{1}"; - Messages.form_page_next = "Next"; Messages.form_anonymousBox = "Answer anonymously"; @@ -607,12 +611,13 @@ define([ val = +f.selectedDates[0]; } } - if (values.indexOf(val) === -1) { values.push(val); } + if (val && values.indexOf(val) === -1) { values.push(val); } else { duplicates = true; } }); } + values = values.filter(Boolean); // Block empty or undeinfed options if (!values.length) { - return void UI.warn(Messages.error); // XXX error message: no values + return void UI.warn(Messages.error); } var res = { values: values }; @@ -959,7 +964,8 @@ define([ get: function (opts, a, n, evOnChange) { if (!opts) { opts = TYPES.input.defaultOpts; } var tag = h('input', { - type: opts.type + type: opts.type, + placeholder: Messages['form_input_ph_'+opts.type] || '' }); var $tag = $(tag); $tag.on('change keypress', Util.throttle(function () { @@ -1833,7 +1839,7 @@ define([ }); return results; }; - var makeFormControls = function (framework, content, update) { + var makeFormControls = function (framework, content, update, evOnChange) { var loggedIn = framework._.sfCommon.isLoggedIn(); var metadataMgr = framework._.cpNfInner.metadataMgr; @@ -1886,6 +1892,7 @@ define([ console.error(err || data.error); return void UI.warn(Messages.error); } + window.onbeforeunload = undefined; if (!update) { // Add results button addResultsButton(framework, content); @@ -1901,7 +1908,57 @@ define([ reset = undefined; } + var invalid = h('div.cp-form-invalid-warning'); + var $invalid = $(invalid); + if (evOnChange) { + var origin, priv; + if (APP.common) { + var metadataMgr = APP.common.getMetadataMgr(); + priv = metadataMgr.getPrivateData(); + origin = priv.origin; + } + evOnChange.reg(function () { + var $container = $('div.cp-form-creator-content'); + var $inputs = $container.find('input:invalid'); + if (!$inputs.length) { + $send.text(update ? Messages.form_update : Messages.form_submit); + return void $invalid.empty(); + } + $send.text(update ? Messages.form_updateWarning : Messages.form_submitWarning); + var lis = []; + $inputs.each(function (i, el) { + var $el = $(el).closest('.cp-form-block'); + var number = $el.find('.cp-form-block-question-number').text(); + var a = h('a', { + href: origin + '#' + Messages._getKey('form_invalidQuestion', [number]) + }, Messages._getKey('form_invalidQuestion', [number])); + $(a).click(function (e) { + e.preventDefault(); + if (!$el.is(':visible')) { + var pages = $el.closest('.cp-form-page').index(); + console.error($el, $el.prevAll()); + if (APP.refreshPage) { + APP.refreshPage(pages + 1); + } + // XXX find page number + } + $el[0].scrollIntoView(); + }); + var li = h('li', a); + lis.push(li); + }); + var list = h('ul', lis); + var content = [ + h('span', Messages.form_invalidWarning), + list + ]; + $invalid.empty().append(content); + }); + evOnChange.fire(); + } + return h('div.cp-form-send-container', [ + invalid, cbox ? h('div', cbox) : undefined, send, reset ]); @@ -2002,6 +2059,7 @@ define([ var elements = []; + var n = 1; // Question number content.order.forEach(function (uid) { var block = form[uid]; var type = block.type; @@ -2031,7 +2089,10 @@ define([ var dragHandle; - var q = h('div.cp-form-block-question', block.q || Messages.form_default); + var q = h('div.cp-form-block-question', [ + h('span.cp-form-block-question-number', (n++)+'.'), + h('span', block.q || Messages.form_default) + ]); var editButtons, editContainer; APP.formBlocks.push(data); @@ -2203,7 +2264,7 @@ define([ var pageContainer = h('div.cp-form-page-container'); var $page = $(pageContainer); _content.push(pageContainer); - var refreshPage = function (current) { + var refreshPage = APP.refreshPage = function (current) { $page.empty(); if (!current || current < 1) { current = 1; } if (current > pages) { current = pages; } @@ -2257,7 +2318,7 @@ define([ } // In view mode, add "Submit" and "reset" buttons - $container.append(makeFormControls(framework, content, Boolean(answers))); + $container.append(makeFormControls(framework, content, Boolean(answers), evOnChange)); }; var getTempFields = function () {