CODEWITHSUNDEEP
javascripthtmlreactjs
Esteban Echeverry
Esteban Echeverry

Reputation: 164

Change required input message in React

I need to change the alert (Please fill out this field) in React.

Example:

A Form component and an Input component.

PD: I am able to do it in a simple HTML with JS, but I just can't get it working with React

PD2: I know I can use the stated to validate and throw custom error messages, but I just have to do it using the required alert promp

Upvotes: 1

Views: 12978

Answers (4)

Abed Al Ghani Mosbah Shaaban
Abed Al Ghani Mosbah Shaaban

Reputation: 108

As for me (while using React), e.target had only 3 methods addEventListener, dispatchEvent, and removeEventListener. So the solution was to use currentTarget

Solution:

<input

  onInvalid={(e) =>
    e.currentTarget.setCustomValidity('CUSTOM MESSAGE')
  }

  onInput={(e) => e.currentTarget.setCustomValidity('')}

  />

Hope this helps!

Upvotes: 2

Samuel Urunaga
Samuel Urunaga

Reputation: 41

i managed to solve this like this
onInvalid={F => F.target.setCustomValidity('Enter User Name Here')} 
onInput={F => F.target.setCustomValidity('')}

Upvotes: 4

abdel
abdel

Reputation: 1

None of these answeres helped me, this is easiest way Just add this in your props ex:

  onInvalid={e => e.target.setCustomValidity("Code is required")}

Upvotes: 0

Jhon Jairo Mu&#241;oz Silva
Jhon Jairo Mu&#241;oz Silva

Reputation: 74

You can apply this piece of code inside the component of the input that you want to change the alert:

htmlInput.oninvalid = function(e) {
    e.target.setCustomValidity("Here is your text!");
};

Also here is an example of use in a component:

componentDidMount(){
    var htmlInput = document.getElementById("id");
    htmlInput.oninvalid = function(e) {
        e.target.setCustomValidity("This can't be left blank!");
    };
}

Upvotes: 5

Related Questions