Add asterisk to mandatory fields

[stephaniesimms]

Add asterisk to mark mandatory form fields via CSS. Try red asterisks cf. DMPtool (screenshot below).

[briri]

a CSS solution won't work for this. We should be able to add some JS to the ariatiseForm.js and validation.js though to add in the asterisk. Just need to determine how best to apply it to regular input fields vs checkboxes and radio buttons. Maybe something like:

const addAsterisk = (el) => {
  if (isObject(el) && el.attr('aria-required') === 'true') {
    if (el.attr('type') === 'checkbox') {
      el.after(' * ');
    } elseif (el.attr('type') === 'radio') {
        el.closest('.form-group').before('* ');
      } else {
        const label = el.closest('.form-group').find('label');
        if (isObject(label)) {
          label[0].before('* ');
        }
      }
    }
  }
};

The method could be called at the same time the help text is added. An example of required radio buttons can be found on the share plan page and example of a required checkbox can be found on the create account page

[briri]

Updated to add asterisks to any fields marked with aria-required="true" which drives our form validations.
@stephaniesimms and @sjDCC it looks though like we don't require all of the fields we should be requiring. For example in the Template and Guidance pages in particular there are a lot of fields I would expect to be required (e.g. Question text, Section title, etc.) We should probably go through all of the admin pages and create a new ticket for making any of these fields required (can all be listed on one ticket).

[stephaniesimms]

asterisks look good @briri - @sjDCC and I can go through all pages and create a new issue for any additional fields that should be required.

for now, there's just a tiny html issue that crept in on the Edit Profile page. see screenshot below and remove

tag

[jollopre]

After adding asterisks, I've just noticed that create plans has changed. Is that the layout desired?

[sjDCC]

Having a red asterisk looks good and is clear for end users. Thanks @briri

This layout change on 'create plan' isn't desired @jollopre and I'm sure was unintended. The question text should come above the combo-select box. Must be an effect of the asterisk.

In terms of admin, I'm sure question text and section title did used to be mandatory as I've had error messages before refusing to save if this is blank. Good to raise tickets to reinstate them if this logic has been lost. I think they're the main two cases, as well as name for guidance and email & name on edit profile.

I see the p tag too on edit profile page now too @stephaniesimms so this and the create plan layout adjustments need to be fixed. The same tag displays on admin guidance page first para too.

[stephaniesimms]

thanks for catching that @jollopre - we don't want asterisks on the create plan page, which also messed up the layout. to summarize remaining work for this issue @briri :

• remove html tags from Edit profile page and Guidance page
• remove red asterisks from Create plan page

I created a new issue to identify fields that should be mandatory (either those that were previously and have been lost or new mandatory fields). please add anything else you find to it @sjDCC #1326