The first useful thing I learned was the ability to place a background image and background color on the same element. Previously I had been creating extra divs, moving them around and adjusting opacity. But the below code works just fine:
<div id='wrapper' className='h-full bg-[url("./images/bg-intro-mobile.png")] bg-orange pt-[88px] px-6 pb-[68px] xl:px-0 xl:py-[121px] xl:flex xl:flex-col xl:flex-wrap xl:items-center'>
I spent a lot of time trying to better understand React Hook Form during this project. I ran up against the default browser vaildation widget again. Previously I could work around it but with so many fields in this project the work around was not the best route. Finally I gave up and googled "chrome validation widget prevents react hook form from working on email fields". That search term was a winner and brought me to this page with the solution. It is very simple and I am happy to be done with this issue forever. Here is a SS of the error from the browser:
Here is the simple code that fixes it and allows the code from React Hook Form to do its job:
<form noValidate onSubmit={handleSubmit(onSubmit, onError)}>
The last thing I learned was how to change the text color dynamically. Set the original text color and change the text color when an error it triggered. Simple enough. But how to change the text color back to the original color when the user begins to change the input? Listener waiting for the input event was the key here:
function onError(e) {
// When an error occurs then for each error find the warning div for that field and display it
for (const error in e) {
let errorText = document.getElementById(error);
console.log(errorText.value)
errorText.style.color = '#FF7979'
let errorElement = document.getElementById(error).parentElement.nextSibling
errorElement.style.display = 'block'
// Listen for when the user begins to fix the input and change the color of the text back to black
errorText.addEventListener('input', function(){
console.log('change')
errorText.style.color ='#3D3B48'
})
}
}
