E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: connrs
Date: Mon, Mar 17 2025 7:07AM
Subject: HTML Forms with required inputs and a save draft feature
No previous message | Next message →

Hi all,

I'm looking for advice about HTML forms containing inputs that are required
(i.e. they have the required attribute set) but where there may be a need
to allow for a 'save for later' (or similar) feature.

In the simple scenario, the user would click the submit button and either
the browser would flag up the mandatory fields using native form validation
APIs or custom client-side validation would do the same thing.

However, a more complicated scenario would be where all but a handful of
inputs could optionally be left blank or untouched because the user could
choose to 'save for later' because they don't have all the data to hand but
want to partially save their progress.

Where I've been involved in the development of forms like this in the past
the teams have:

1. Put clear language at the top of the form to explain that all fields
listed as required will be required but that they may be left blank as long
as the user isn't publishing (1) and is merely saving for later.
2. Set the required attribute on all required inputs regardless of whether
they are optional until the publish action
3. Include the word "mandatory" or "required" in the label of all inputs
regardless of whether they are optional until the publish action

Is this appropriate or not quite right? Are there any other accepted
patterns/techniques for this?

Kind regards,
Paul.

(1): I'm using the term publishing here as an example but this phrase could
be replaced with "fire the missiles", "submit my application", or "pay for
hotel booking".
--
*connrs (Paul Connolley)*
(he/him)
@ = EMAIL ADDRESS REMOVED = <https://indieweb.social/@connrs> - https://conn.rs/

From: Patrick H. Lauke
Date: Mon, Mar 17 2025 7:21AM
Subject: Re: {Spam?} HTML Forms with required inputs and a save draft feature
← Previous message | Next message →

Note that it's possible to suppress validation for a form, rather than
having to add/remove the required attributes on required fields.

For instance, if you have two submit buttons - one to Save, one to
Submit - you can add formNoValidate to the Save one
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/formNoValidate

P
--
Patrick H. Lauke

* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke

From: Paul Connolley
Date: Wed, Mar 19 2025 7:01AM
Subject: Re: {Spam?} HTML Forms with required inputs and a save draft feature
← Previous message | No next message

On 17/03/2025 13:21, Patrick H. Lauke via WebAIM-Forum wrote:

> For instance, if you have two submit buttons - one to Save, one to
> Submit - you can add formNoValidate to the Save one
> https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/formNoValidate

That's a really nice point about formNoValidate. Where it comes to
writing progressively enhanced experiences I do like to have a good
baseline and this is one I hadn't considered but it will be on my mind
from now on.

However, while I'm sure I'd know how to write the code to solve this,
I'm just as interested in knowing if anyone felt it wouldn't be a good
user experience. I take it you don't see anything terrible in this as an
overarching approach?

--
*connrs (Paul Connolley)*
(he/him)
@ = EMAIL ADDRESS REMOVED = <https://indieweb.social/@connrs> - https://conn.rs/