Disable validation of HTML5 elements in a form
In forms programmers are using inputs with HTML5 types (types). For example, for the following case it is required to enter a number between 13 and 16 digits:
<input type="text" pattern="[0-9]{13,16}" title="A credit card number" />
As can be seen in the image, the browser (Chrome in this case), shows a validation which I want to avoid since this and other validations we want to pass next to the server and show customized messages.
Is there any how to get rid of these browser-generated validation messages without having to manually edit each input of the form?
2 answers
The easiest way to disable validation for HTML5 forms is to add the novalidate attribute to the form.
For example:
<form method="POST" novalidate>
...
</form>
Or its corresponding alternatives:
<form method="POST" novalidate="novalidate">
...
</form>
<form method="POST" novalidate="">
...
</form>
References:
Aside from the novalidate option that Caesar specifies in his answer, there is another alternative that can also be useful: using the formnovalidate attribute.
A submit button with the formnovalidate attribute has the same effect as putting novalidate on the form tag directly, but has an added advantage: there can be multiple submit fields in a form which allows you to have the option to validate or not the form when it is submitted (source: W3C).
This can be very useful to, for example, save the form to continue later, or process some values even though it is not fully completed. Demo:
<form>
<table>
<tr>
<td>Nombre</td>
<td>
<input type="text" name="nombre" required />
</td>
</tr>
<tr>
<td>Apellido</td>
<td>
<input type="text" name="apellido" required />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Enviar (con validación)" /><br/>
<input type="submit" value="Completar más tarde (sin validación)" formnovalidate />
</td>
</tr>
</table>
</form>