From e0be38dfa2fd84fa1b37bd33311587324cd75293 Mon Sep 17 00:00:00 2001 From: Thomas Yems <93599300+tomyems@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:29:00 +0100 Subject: [PATCH 1/2] Clearer date error messages The error 'Date must be a real date' does not help users to fix the problem, as it is not very descriptive. This breaks down the reasons why a date might not be a real date to help users fix the problem and continue with the service. --- src/components/date-input/index.md | 40 +++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/src/components/date-input/index.md b/src/components/date-input/index.md index b81a25e060..72bc6ee9d1 100644 --- a/src/components/date-input/index.md +++ b/src/components/date-input/index.md @@ -35,8 +35,6 @@ Read more about [why and how to set legends as headings](/get-started/labels-leg Make sure that any example dates you use in hint text are valid for the question being asked. -Accept month names written out in full or abbreviated form (for example, ‘january’ or ‘jan’) as some users may enter months in this way. - There are 2 ways to use the date input component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro. {{ example({ group: "components", item: "date-input", example: "default", html: true, nunjucks: true, open: false, size: "s", titleSuffix: "second" }) }} @@ -93,13 +91,43 @@ Say ‘[whatever it is] must include a [whatever is missing]’.
For example, ‘Date of birth must include a month’, ‘Date of birth must include a day and month’ or ‘Year must include 4 numbers’. -#### If the date entered cannot be correct +#### If the day, month or year cannot be correct + +Accept all unambiguous inputs. + +For day, accept: +- the numbers 1 to 31 +- single digits with a leading zero, 01 to 09 +- ordinals, 1st, 2nd, ... 31st +- ordinals written, first, second, ... thirty-first + +For month, accept: +- the numbers 1 to 12 +- single digits with a leading zero, 01 to 09 +- English long month names, January, February ... December +- English short month names, Jan, Feb, ... Dec + +For day ordinals, and month names, accept any case. For example, 'jan', 'JAN', 'Jan'. + +For year, accept any 4 digits. + +If day cannot be correct but month and year can, say: ‘Day must be a number between 1 and 31’ +If month cannot be correct, by day and year can, say: ‘Month must be a number between 1 and 12’ +If year cannot be correct, but day and month can, say: ‘Year must include 4 numbers’ + +If more than one of day, month and year cannot be correct, then combine the error messages. For example, if day and month cannot be correct, but year can say: ‘Day must be a number between 1 and 31. Month must be a number between 1 and 12.’ + +If day, month and year all cannot be correct, say: ‘Day must be a number between 1 and 31. Month must be a number between 1 and 12. Year must include 4 numbers.’ + +Highlight the day, month or year fields with the information that cannot be correct. + +#### If the date as a whole does not exist -For example, ‘13’ in the month field cannot be correct.
+If the month is April, June, September, November, then check the day is between 1 and 30. If not, say ‘Day must be a number between 1 and 30 for [month]’. Highlight the day and month. -Highlight the day, month or year field with the incorrect information. Or highlight the date as a whole if there’s incorrect information in more than one field, or it's not clear which field is incorrect.
+If the month is February and the year is a leap year, then check the day is between 1 and 29. If not, say ‘Day must be a number between 1 and 29 for February [year]’. Highlight the date input as a whole. -Say ‘[Whatever it is] must be a real date’. For example, ‘Date of birth must be a real date’. +If the month is February and the year is not a leap year, then check the day is between 1 and 28. If not, say ‘Day must be a number between 1 and 28 for February [year]’. Highlight the date input as a whole. #### If the date is in the future when it needs to be in the past From c792b80ae3a9bd9b3073ac9a5157ff9137315a4a Mon Sep 17 00:00:00 2001 From: Thomas Yems <93599300+tomyems@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:38:23 +0100 Subject: [PATCH 2/2] Add decision help Added some limited additional guidance on other reasons why users might have left part of the date blank, or are encountering relative date error messages. --- src/components/date-input/index.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/date-input/index.md b/src/components/date-input/index.md index 72bc6ee9d1..fa951e97db 100644 --- a/src/components/date-input/index.md +++ b/src/components/date-input/index.md @@ -91,6 +91,8 @@ Say ‘[whatever it is] must include a [whatever is missing]’.
For example, ‘Date of birth must include a month’, ‘Date of birth must include a day and month’ or ‘Year must include 4 numbers’. +Consider that a user might intentionally leave part of the date blank because they do not know the exact day, or they remember the day and month but not the year. Could you provide more help to these users? + #### If the day, month or year cannot be correct Accept all unambiguous inputs. @@ -159,30 +161,40 @@ Highlight the date input as a whole.
Say ‘[whatever it is] must be the same as or after [date and optional description]’. For example, ‘The date your course ends must be the same as or after 1 September 2017 when you started the course’. +Consider that the other date, in this example 1 September 2017, might be wrong instead. If this is possible, provide help to users to change this date too. + #### If the date must be after another date Highlight the date input as a whole.
Say ‘[whatever it is] must be after [date and optional description]’. For example, ‘The day your course ends must be after 1 September 2017’. +Consider that the other date, in this example 1 September 2017, might be wrong instead. If this is possible, provide help to users to change this date too. + #### If the date must be the same as or before another date Highlight the date input as a whole.
Say ‘[whatever it is] must be the same as or before [date and optional description]’. For example, ‘The date of Gordon’s last exam must be the same as or before 31 August 2017 when they left school’. +Consider that the other date, in this example 31 August 2017, might be wrong instead. If this is possible, provide help to users to change this date too. + #### If the date must be before another date Highlight the date input as a whole.
Say ‘[whatever it is] must be before [date and optional description]’. For example, ‘The date of Gordon’s last exam must be the same as or before 31 August 2017’. +Consider that the other date, in this example 31 August 2017, might be wrong instead. If this is possible, provide help to users to change this date too. + #### If the date must be between two dates Highlight the date input as a whole.
Say ‘[whatever it is] must be between [date] and [date and optional description]’. For example, ‘The date your contract started must be between 1 September 2017 and 30 September 2017 when you were self-employed’. +Consider that these dates, in this example 1 September 2017 and 30 September 2017, might be wrong instead. If this is possible, provide help to users to change these dates too. + ## Research on this component [Findings from the Apply for teacher training service](https://github.com/alphagov/govuk-design-system-backlog/issues/42#issuecomment-1119724868) showed that hundreds of users were inputting months using full or abbreviated month names and getting an error. They changed the component to accept month names to be consistent with this observed behaviour. Since changing the service the number of errors has dropped dramatically.