Como posso fazer uma mascar para um campo onde o usurário não érre esse padrão a baixo
exemplo '0.50','0.60','0.70'
os valores decimais sempre dentro de aspas e separados por virgula
se digitado errado mostrar mensagem
Como posso fazer uma mascar para um campo onde o usurário não érre esse padrão a baixo
exemplo '0.50','0.60','0.70'
os valores decimais sempre dentro de aspas e separados por virgula
se digitado errado mostrar mensagem
Você pode utilizar a biblioteca jQuery-Mask-Plugin, e utilizar Expressões Regulares para verificar o valor do campo. Veja o exemplo:
$(document).ready(function() {
var campo = $('.campo');
var alert = $('.erro');
var mascara = "'0.00'";
var fnc = function(v) {
// Se o texto do campo tiver o mesmo tamanho
// que a variável mascara, incrementa: ,'0.00' e faz o retorno,
// caso contrário retorna o valor atual da variável mascara
return (v.length === mascara.length) ? mascara += ",'0.00'" : mascara;
};
var options = {
onKeyPress: function(v, e, f, o) {
console.log(v);
const reg = /('\d{1}\.\d{2}',?)|(\d+)|(\')/g;
let result = true;
var test = v.match(reg);
if (test) {
test.forEach(r => {
if (/('\d{1}\.\d{2}',?)/.test(r) === false) {
result = false;
}
});
}
// Verifica se o valor da variável 'result' é falso
// caso for exibi a mensagem, caso contrário oculta.
(result === false) ? alert.show(): alert.hide();
campo.mask(fnc(v), o);
}
};
campo.mask(mascara, options);
});
.test {
border: 2px solid #ccc;
padding: 6px;
}
.erro {
border: 2px solid red;
}
div.erro {
background: #ff7675;
border: 0;
color: #fff;
display: none;
font-family: 'Verdana';
font-size: 15px;
margin-top: 15px;
padding: 12px;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>
<input type="text" class="campo" />
<div class="erro">Dados invalidos</div>
Veja se isto pode te ajudar:
Javascript:
var input = document.getElementById("input");
var logger = document.getElementById("logger");
var $array = ["'0.50'","'0.60'","'0.70'"];
var i;
function validar(){
var $descartavel = input.value;
for (i = 0; i < $array.length; i++) {
if($descartavel.indexOf($array[i]) != -1){
logger.innerHTML = "";
}else{
if(i == 10){
i = 0;
}
logger.innerHTML = "Valores estão inválidos! Corrija-os por favor!";
}
}
}
HTML:
<input type="text" id="input" onkeyup="validar()"/><br/><br />
<div id="logger" style="background:#f44336;color:#fff;">