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
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!");
};
}
oninvalid: htmlInput.oninput = function(e) { e.target.setCustomValidity(' '); };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")}
