CODEWITHSUNDEEP
htmlcssreactjsvalidation
user3790598
user3790598

Reputation: 35

How to hide input required message "please fill out this field"

I have added the required property to my input and I just want to leave the border color without the "please fill out this field" message. Is it possible to hide that message?

<input
    placeholder={protocolPlaceholder}
    id="numProtocol"
    onChange={(e) => handleOnChange(e)}
    value={numProtocol}
    required
/>

Upvotes: 1

Views: 5993

Answers (1)

Sultan H.
Sultan H.

Reputation: 2938

It's basically The HTML5 Tooltip that comes along with the required attribute, to solve this, try adding an empty form to your DOM, such as:

<form id="novalidateform" novalidate />

Then add form="novalidateform" property to your input:

<input
 form="novalidateform"
 placeholder={protocolPlaceholder}
 id="numProtocol"
 onChange={(e) => handleOnChange(e)}
 value={numProtocol}
 required
/>

Note that the empty form id and the prop form value given to the input must match.

More on this.

Upvotes: 4

Related Questions