How can i use data outside of the submit function - react-hook-form

Question

Trying to use data outside of the submit function to use my own validation
onBlur = {
() = > {
setNameError(nameValidation(data.name));
}
}

Answer 1

You should not handle validation with onBlur function first of all. You can listen to events on form using these approaches so that you capture both form input and button click.
I have not covered styling of form . You can look into more info link to do that one but yeah, just add or remove a class as shown in code below which either shows validation text or not show based on input changes.
// create form with id/class
// There are many ways to pick a DOM node; here we get the form itself and the email
// input box, as well as the span element into which we will place the error message.
const form = document.getElementsByTagName('form')[0];
const email = document.getElementById('mail');
const emailError = document.querySelector('#mail + span.error');
// add an event listener to listen to both form and button click which are defined by id "email" and "submit" as button events.
email.addEventListener('input', function(event) {
// Each time the user types something, we check if the
// form fields are valid.
if (email.validity.valid) {
// In case there is an error message visible, if the field
// is valid, we remove the error message.
emailError.textContent = ''; // Reset the content of the message
emailError.className = 'error'; // Reset the visual state of the message
} else {
// If there is still an error, show the correct error
showError();
}
});
form.addEventListener('submit', function(event) {
// if the email field is valid, we let the form submit
if (!email.validity.valid) {
// If it isn't, we display an appropriate error message
showError();
// Then we prevent the form from being sent by canceling the event
event.preventDefault();
}
});
// finally kick off the error that validates input or button click both and displays error if needed.
function showError() {
if (email.validity.valueMissing) {
// If the field is empty,
// display the following error message.
emailError.textContent = 'You need to enter an e-mail address.';
} else if (email.validity.typeMismatch) {
// If the field doesn't contain an email address,
// display the following error message.
emailError.textContent = 'Entered value needs to be an e-mail address.';
} else if (email.validity.tooShort) {
// If the data is too short,
// display the following error message.
emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
}
// Set the styling appropriately
emailError.className = 'error active';
}
More info
// On react way
handleOnChange(ev): React.MouseEvent {
this.validateUserInput(ev):
}
const validateUserInput = (ev) => {
if (ev.target.textContent.indexOf(Regular expression logic goes here)) {
this.state.setState({
formValidationText: "Character must be 3 at least"
})
}
}
const renderValidationText = () => { <
h1 > {
this.state.formValidationText
} < /h1>
}
render() {
return <>
<input placeholder="Enter your name" onChange = {
(ev) => this.handleOnChange.bind(this)
}/>
{this.renderValidatorText}
/>
}