What's the difference between novalidate and formnovalidate attributes of HTML5?

Question

From w3c schools we have these definitions:

novalidate:

When present, it specifies that the form-data (input) should not be validated when submitted.

formnovalidate:

When present, it specifies that the element should not be validated when submitted.

Does it make any difference using formnovalidate in the submit button insted of using novalidate in the form?

(I really don't get the difference)

Sprinkling

Answer 1

novalidate is applied to the form, and prevents it from being validated; formnovalidate is applied to a submit button, and overrides the novalidate option, if present; it means 'submit this form without validating, regardless of the general form setting'.

The example given in the spec is when a user is saving data rather than publishing it; the data might be incomplete and invalid, but doesn't require validation to be saved.

Suzetta

Formnovalidate can also be used on input elements, so that the whole form validates but not that input element. – Chronister

+ We're talking about client-side validation (validation in the browser) – Chronister

This did not work for me: <input type="number" name="futureDailyAdSpend" value="138.03" step="50" min="50" formnovalidate/>. I get this error: "Please enter a valid value. The two nearest valid values are 100 and 150." – Nilsson

@JorisdeRuiter That does not appear to be true, at least not in Chrome. You can't disable validation per-field. – Aid