Home / Questions / 256
Accepted
César
Asked: 2020-12-03 08:01:11 +0800 CST 2020-12-03 08:01:11 +0800 CST

Disable HTML5 element validation in a form

  • 772

In forms, programmers are using typesHTML5 typed inputs ( ). For example, the following case requires the entry of a number between 13 and 16 digits:

<input type="text" pattern="[0-9]{13,16}" title="A credit card number" />

enter image description here

As can be seen in the image, the browser (Chrome in this case), shows a validation which I want to avoid since we want to pass this and other validations to the server side and display customized messages.

Is there a way to get rid of these browser-generated validation messages without having to manually edit each inputform?

validación

2 Answers

  1. Best Answer

    The easiest way to disable validation for forms with HTML5 is to add the attribute novalidateto the form.

    For example:

    <form method="POST" novalidate>
    ...
</form>

    Or their corresponding alternatives:

    <form method="POST" novalidate="novalidate">
    ...
</form>

<form method="POST" novalidate="">
    ...
</form>

    References:

    • 20

  2. Aside from the option novalidateCesar specifies in his answer , there is another alternative that may also be useful: using the formnovalidate.

    A button submitwith the attribute formnovalidatehas the same effect as putting it novalidatein the form tag directly, but it has an added advantage: there can be multiple fields submitin 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 for, for example, saving the form to continue later, or processing some values ​​even though it has not been fully completed. demonstration:

    <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>

    • 8