Hello, I’m making a optin for for a landing page, based on other posts by the community this is the code I’ve managed to get functional:
<!--Button styling submission-->
<script>
document.addEventListener('DOMContentLoaded', () => {
const phoneInput = document.querySelector('#phone');
const targetFormButton = document.querySelector('#form-submit');
if (!phoneInput || !targetFormButton) return;
phoneInput.addEventListener('input', () => {
const isValid = phoneInput.checkValidity();
targetFormButton.classList[isValid ? 'remove' : 'add']('invalid');
targetFormButton.classList[isValid ? 'add' : 'remove']('valid');
});
});
</script>
What it does in its current state is when the phone input(last text field) has some information it changes styling of the submit button.
Yet this is not the best solution, we use the intl tel input library and added a validator. Meaning that when the phone number is correct it will unhide a span in a embed with the text “Valid number”.
What I’m looking to do is only changing the button color when all fields have been filled out(name, email & phone field has the span “valid number” visible meaning the number is valid).
If anyone has any tips or suggestions on how to make this, I would really appreciate your input!