Estoy usando un complemento de jQuery para crear una máscara de entrada, pero mi código es demasiado grande.
El usuario no debe poder comenzar el número de teléfono con cero. El mensaje de error tiene que desaparecer cuando escribe el número correcto.
¿Cómo puedo optimizar este código? ¿Puedo usar una matriz para los números? No he encontrado una manera de hacer esto. ¡Gracias por adelantado!
var inputMask = function(val) { return '(00) 0 0000-0000' }, noZero = { onKeyPress: function(val, e, field, options) { if (field.val() == "") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(1") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(2") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(3") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(4") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(5") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(6") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(7") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(8") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(9") { document.getElementById("PhoneError").innerHTML = ""; } else if (field.val() == "(0") { document.getElementById("PhoneError").innerHTML = "Don't start with zero"; field.val(field.val().substr(0, 1)) } field.mask(inputMask.apply({}, arguments), options) } }; $("input[type='tel']").mask(inputMask, noZero) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script> <input type="tel" id="tel" placeholder="tel"> <div id="PhoneError" style="color:red"></div>Está evaluando todos los estados, tanto buenos como malos, en lugar de solo verificar los estados no válidos del valor.
Simplemente puede borrar el mensaje de error cuando se presiona una nueva tecla, luego verifique el valor de las reglas no válidas conocidas; en este caso, comenzando con (0 .
let $phoneError = $('#PhoneError'); let inputMask = function(val) { return '(00) 0 0000-0000' }; let noZero = { onKeyPress: function(val, e, field, options) { $phoneError.text(''); // clear the error when a new key is typed. // evaluate known invalid states only: if (val == "(0") { $phoneError.text("Don't start with zero"); field.val((i, v) => v.substr(0, 1)); } field.mask(inputMask.apply({}, arguments), options) } }; $("input[type='tel']").mask(inputMask, noZero) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script> <input type="tel" id="tel" placeholder="tel"> <div id="PhoneError" style="color:red"></div> Aparte del problema, no es necesario devolver una cadena codificada de una función para establecer inputMask . Puedes configurar la cadena directamente:
let inputMask = '(00) 0 0000-0000';