Novalidate and formnovalidate
Learn to disable validation with novalidate and formnovalidate.
Turn validation off with novalidate
Sometimes you need to submit a form without validation; for example to save a draft of faulty data. Add novalidate to the <form> tag and the browser ignores every validation rule, sending the form as-is. Rules like required, pattern or type=email are not applied. The attribute takes no value; its presence is enough.
Skip a single button with formnovalidate
Sometimes you want one button to skip validation; a Save draft button that submits without checks, while the main Submit button still validates. formnovalidate goes on a <button>, and only that button skips validation when clicked. While novalidate closes the whole form, formnovalidate targets a single button. This way one form can offer two different submit behaviours.
Exercise Add novalidate and a draft button to the form
Complete the form below:
- Add novalidate to the
<form>tag - Inside, put a submit button (
type="submit") - Add a second Save draft button that carries
formnovalidate
Both buttons must contain text.
Show example solution
<form action="/signup" method="post" novalidate>
<button type="submit">Submit</button>
<button type="submit" formnovalidate>Save draft</button>
</form>Test yourself
-
Which tag does formnovalidate go on?
- button
- form
- input type=text
- label
Show answer
button — Correct. formnovalidate goes on a button; only that button skips validation when clicked.
-
Turn off validation on the form
<form action="/signup" method="post" ____> <button type="submit">Submit</button> </form>Show answer
<form action="/signup" method="post" novalidate> <button type="submit">Submit</button> </form> -
Match each attribute to where it goes
- novalidate
- on the form tag
- formnovalidate
- on a button tag
- required
- on an input tag
- pattern
- on input (text/password)