Form validation patterns for Conditionally revealing content

[trevorsaint]

I'm looking at form validation patterns.

It would be good for a collection of validation patterns which incorporate conditionally revealing content.

As an example:

The first validation in this case would be: Choose an answer

Secondly if yes has been chosen we now have the error on the National Insurance number and not the answer.

It would be interesting to see how you handle the styling aspects of this and if it has been considered.

Thanks

[edwardhorsford]

Here's how we did it on passports. I think your repurposing of the grey
inset border is nicer.

[image: Inline images 1]
[image: Inline images 3]

On 8 June 2016 at 10:06, Trevor Saint [email protected] wrote:

I'm looking at email validation patterns.

It would be good for a collection of validation patterns which incorporate
conditionally revealing content.

As an example:
[image: ni-number-error]
https://cloud.githubusercontent.com/assets/4989027/15888692/cb797328-2d5f-11e6-9e10-03edb0187f89.png

The first validation in this case would be: Choose an answer

Secondly if yes has been chosen we now have the error on the National
Insurance number and not the answer.

[image: ni-number-input-error]
https://cloud.githubusercontent.com/assets/4989027/15888798/5287ed68-2d60-11e6-897d-52cc01f60746.png

It would be interesting to see how you handle the styling aspects of this
and if it has been considered.

Thanks

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#249, or mute the
thread
https://github.com/notifications/unsubscribe/ACGiQLtLK_3O4G4zuteAkh4sPypfDHyaks5qJoYYgaJpZM4Iwvrf
.

---

Ed Horsford

Designer
Government Digital Service

[trevorsaint]

Hi Ed.

I do agree in that it looks nicer but the pattern we have does not allow this. I would effectively be adding the error onto the panel itself instead of form-group.

I can't see your images if you attached any?

Trevor

[edwardhorsford]

Sorry, I replied via email. Didn't realise this was a github message.

Images from passports:

[trevorsaint]

No problem Ed

I can see now what you are talking about.

Wow those labels are massive :).

I personally think the twin lines do not look as nice. And the way I showed it above does look better (my opinion only).

I will role with whatever GDS suggest, but do feel that a pattern for this has not been thought out or is in the todo list.

Cheers,

Trevor

[gemmaleigh]

I see what you mean. The first example works but only if there is only one field in the revealed section, if there is more than one then the red line is ambiguous (as to which field has the error).

cc. @timpaul who is prioritising work for the Patterns and tools team.

[trevorsaint]

Thanks Gemma. That would be most helpful :)

[robinwhittleton]

On Verify (e.g. on the ‘Do you have a mobile phone or tablet?’ page) we just turn the color of the conditional panel’s border from grey to red. In that case though we only have one question in the panel so we can get away from it.

[edwardhorsford]

I'm somewhat wary of just changing the colour, though it does look nice - If you struggle to distinguish colours, not much changes when an error happens. Is it clear enough what to do?

[trevorsaint]

I have modified the html. Added the error class not specifically on the form-group and it can work.

I feel that this does look a lot better. Obviosuly i have only added the error class and not the messages but you should be able to get the idea from this visual.

[timpaul]

This is good, but I think we can simplify further and remove the red border from the parent question:

After all, there's nothing actually wrong with the users response on that part of the form.

The double-borders effect I can live with as it's an error, and at least the borders are aligned and of equal thickness.

[edwardhorsford]

👍 This is pretty much how we handled it on passports.

[trevorsaint]

@timpaul

I hear your suggestion. The problem I am faced with is this. A selection must be made initially. If a user clicks Save and continue without making a selection, we need an error notification for the user.

Lets say the user then makes a selection. We would still have the red border on the parent selection because we have not clicked Save and continue again.

Do you see the problem?

[edwardhorsford]

In that case, the child element wouldn't have the error, since that hasn't been submitted yet?

If they then click submit without answering the child question, I'd expect the error on the child only.

[trevorsaint]

You are exactly right :)

[trevorsaint]

Hi @edwardhorsford

Your solution works in most scenarios by modifying html. In this situation the input inherits the style error from the parent.

I am wondering if the .error .form-control is an ideal css attribute?

<fieldset class="error">

  <legend>
    <span class="form-label-bold">How often do you get paid?</span>
    <span class="error-message">Choose an answer</span>
  </legend>

   <label>
      <input type="radio">
   </label>

   <div class="panel">
      <input type="text">
   </div>

   <label>
      <input type="radio">
   </label>

   <div class="panel">
      <input type="text">
   </div>

</fieldset>

A similar example on GOV Elements is: How do you want to be contacted?
http://govuk-elements.herokuapp.com/form-elements/example-form-elements/

Do you have an ideas or suggestions?

Thanks

[gavboulton]

I'm in the process of updating the styles on the passports project to use more of elements. Can we increase the specificity of the form-control error styles using something like .error > .form-control?

We have .form-groups within .form-groups for progressive reveals and for dates. If the parent group or fieldset has an error the form-control of the child group inherits the error border.

[gemmaleigh]

Hi @trevorsaint and @gavboulton.

@gavboulton thanks, that works brilliantly.

@trevorsaint let me know if these examples work for you.

I've added a couple of examples to the form examples page - you can see them here:

http://govuk-elements-test.herokuapp.com/form-elements/example-form-elements/#example-conditional-errors

Here's the screenshots, let me know if this fixes the issues with nested errors.

[gemmaleigh]

Hi @trevorsaint can you please let me know if #286 fixes this issue for you. Thanks!