Add headline validation error message if it reaches the maximum length

[Georges-GNM]

Co-authored-by: Samantha Gottlieb samantha.gottlieb@guardian.co.uk

What does this change?

Adds a validation message to the headline field alerting users when they've reached the maximum number of characters. Due to youtube content rules, there is currently a limit of 100, but until now this wouldn't have been clear to users if they reached it.

Just to note, other fields such as the standfirst have their own erroring logic; wary of this clashing with the changes from this PR, we've restricted this validation to the Headline field.

How to test

Running MAM and entering 100 characters (or trying to enter more) in the headline field should now show an error stating You have reached the maximum character length

Images

[jonathonherbert]

Looks good! One comment to address before merging.

Stretch goal for a future PR – I think it'd be nice to surface the fact that a user is getting close to the limit, so they can adjust accordingly as they type, rather than bumping into the limit abruptly.

We could surface that when the field is at e.g. 2/3rd of the limit as 67/100 characters remaining as a yellow warning underneath the field.

[jonathonherbert]

I'm not sure we should be singling out "Headline" in validateField, which is a very generic function.

Instead, perhaps we can act on a maxLength if the value is supplied?

[Georges-GNM]

Yeah, we did have only the maxLength (which comes from videoEditValidation.js) as a check at first, but there are other fields with that parameter (e.g. the description and trail text ones) which, due to being Rich Text fields, have some extra validation logic which considers the word length. We didn't want to have these two pieces of logic to clash for those fields, hence the singling out the headline field.

For those fields which use the RichTextField.tsx component, maybe we could consider not passing the maxLength value to the ManagedField component (which means it wouldn't get passed to validateField), and instead passing maxLength directly to RichTextField, which should still enable it to be used by the validation process happening in richTextHelpers?

[Georges-GNM]

Have made some changes after quickly chatting to @jonathonherbert - think this looks ok now!

Stretch goal for a future PR – I think it'd be nice to surface the fact that a user is getting close to the limit, so they can adjust accordingly as they type, rather than bumping into the limit abruptly.

We could surface that when the field is at e.g. 2/3rd of the limit as 67/100 characters remaining as a yellow warning underneath the field.

Yeah, that's a good shout, and probably fairly straightforward to implement. I'd had a similar train of thought, but along the lines of the form wouldn't actually stop the user from entering more characters in the field, but the application would just not allow you to publish - but that's probably more complicated than it needs to be!

[jonathonherbert]

Ace – tested locally, headline field has a limit as expected, and other rich text fields behave correctly for char length and word-char length behaviour 👍

[prout-bot]

Seen on PROD (merged by @Georges-GNM 6 minutes and 30 seconds ago) Please check your changes!