I need to change the alert (Please fill out this field) in React.
Example:
A Form ponent and an Input ponent.
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
I need to change the alert (Please fill out this field) in React.
Example:
A Form ponent and an Input ponent.
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
Share Improve this question asked Aug 31, 2018 at 22:14 Esteban EcheverryEsteban Echeverry 1741 gold badge2 silver badges10 bronze badges 2- 1 Could you please post some code? – davbuc Commented Aug 31, 2018 at 22:17
- Can you please share your attempts with JS and HTML? Also, have you tried this – Pietro Nadalini Commented Aug 31, 2018 at 22:18
4 Answers
Reset to default 5You can apply this piece of code inside the ponent 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 ponent:
ponentDidMount(){
var htmlInput = document.getElementById("id");
htmlInput.oninvalid = function(e) {
e.target.setCustomValidity("This can't be left blank!");
};
}
i managed to solve this like this
onInvalid={F => F.target.setCustomValidity('Enter User Name Here')}
onInput={F => F.target.setCustomValidity('')}
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!
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")}