Me imagino que esta es una solución de código muy simple de arreglar, pero no he logrado que funcione. Para darle una perspectiva, lo que he hecho actualmente es un formato de formulario con entrada intl tel y luego he incluido el siguiente código (¡que funciona muy bien!) para validar la entrada;
<span id="valid-msg" class="hide">✓Valid number</span> <span id="error-msg" class="hide"></span> <style> .hide { display: none; } #valid-msg { color: #2b9348; } #error-msg { color: #C31014; } <style> <!--for validation--> <script> var input = document.querySelector("#phone"), errorMsg = document.querySelector("#error-msg"), validMsg = document.querySelector("#valid-msg"); var updateInputValue = function (event) { dialCode.value = "+" + iti.getSelectedCountryData().dialCode; }; input.addEventListener('input', updateInputValue, false); input.addEventListener('countrychange', updateInputValue, false); var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"]; var reset = function() { input.classList.remove("error"); errorMsg.innerHTML = ""; errorMsg.classList.add("hide"); validMsg.classList.add("hide"); }; input.addEventListener('blur', function() { reset(); if (input.value.trim()) { if (iti.isValidNumber()) { validMsg.classList.remove("hide"); } else { input.classList.add("error"); var errorCode = iti.getValidationError(); errorMsg.innerHTML = errorMap[errorCode]; errorMsg.classList.remove("hide"); } } }); input.addEventListener('change', reset); input.addEventListener('keyup', reset); </script>Lo que busco hacer es cambiar el estilo del botón Enviar si el número de teléfono es válido. Pensé que esto podría hacerse verificando si el intervalo #valid-msg estaba visible o no tenía una clase. Esto es lo que he probado:
<script> document.addEventListener('DOMContentLoaded', () => { const phoneInput = document.querySelector('#phone'); const validMsg = document.querySelector('#valid-msg'); const targetFormButton = document.querySelector('#form-submit'); if (!phoneInput || !targetFormButton || !validInput) return; phoneInput.addEventListener('input', () => { const isValid = validMsg.className !== 'hide'; targetFormButton.classList[isValid ? 'remove' : 'add']('invalid'); targetFormButton.classList[isValid ? 'add' : 'remove']('valid'); }); }); </script> ``` If anyone have suggestions they would be greatly appreciated!Si su validador funciona correctamente, entonces lo que necesita es un formato condicional a través de la alternancia de clase:
const btnSubmit = document.querySelector('#form-submit') const phoneInput = document.getElementById('phone') const form = document.getElementById('form') // simplified validation: valid if more // than 3 characters long const validator = (val) => { if (val.length < 3) return false return true } // general function to change classes (add & remove) // on an element (el) const validClassToggle = (addClass, removeClass) => (el) => { el.classList.add(addClass) el.classList.remove(removeClass) } // creating setInvalid & setValid functions const setInvalid = validClassToggle('invalid', 'valid') const setValid = validClassToggle('valid', 'invalid') phoneInput.addEventListener('input', function(e) { validator(e.target.value) ? setValid(btnSubmit) : setInvalid(btnSubmit) }) form.addEventListener('submit', function(e) { e.stopPropagation() e.preventDefault() if (validator(phoneInput.value)) { console.log("form submitted") } else { console.log("form not submitted") } }) .valid { background-color: green; color: white; } .invalid { background-color: red; color: white; } <form id="form"> <input id="phone" type="text" /><br /> <button id="form-submit" type="submit">SUBMIT</button> </form>