Executing a function allocated to an object from a comparison in for

Question

Executing a function allocated to an object from a comparison in for

Navigation

#1 by (0 votes)

1

I am building a library to validate forms (I know there are numerous but my case is specific) and I wanted to be able to send a function to an object with the fields and at its sub-level its validators. so from a comparison, when there is a validator in the object, it executes the function related to that validator. So:

var validador = {//verificador...
  notNull : function(i){return i!=0},
  maxLength : function(i,l){return i<=l},
  minLength : function(i,l){return i>=0}
}

obj = {//que envio para o validador, exemplo validando 2 campos(nome,telefone)
    nome : {
        notNull : [mensagem], 
        maxLength : [100,mensagem],
        minLength : [10,mensagem]
    },
    telefone : {
        maxLength : [12,mensagem],
        minLength : [8,mensagem]
  }
}

//checar se os campos estão certos...
function check(campos,obj){
  var c = campos;
  $.each(obj,function(i1,v1){
    $.each(validador, function(i2,v2){
      if(i1==validators[i2]){
       /* 
        * validator[i2](); ???
        * pela logica, se existe esse validador eu enviaria o valor(validador[0])
        * para a função e receberia o retorno dela em uma condicional, dizendo que
        * se a validação fosse 'false' que ele retornasse a a mensagem (validador[1])
        */
      };
    });
  });
};

Someone there has a solution for me, so I'm a little lost about sending data and callback when I do not know which function to execute inside an object ...

help

javascript jquery html5

asked by anonymous 24.03.2015 / 20:29

1 answer

Convert PDF to Image in PHP TortoiseSVN x RiouxSVN (repository back-up)

score 0 · Answer 1

I rewound your code, commenting step by step. I also deleted jQuery dependency, the code uses pure JavaScript only. Hope it helps.

// Esta parte ficou quase igual
var validadores = {
    // O nome notNull não fazia sentido com a sua verificação, alterei
    // A função de trim não está disponível no IE8, se quiser suporte
    // use https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/trim#Polyfill
    notEmpty : function(i){return i.trim() != ''},
    
    // Os métodos abaixo comparam o comprimento do valor passado, 
    // e não mais o próprio valor
    maxLength : function(i,l){return i.length <= l},
    minLength : function(i,l){return i.length >= l}
}

// Aqui só preenchi as mensagens e mudei o notNull para bater
// com a mudança que fiz acima.
// Estou considerando que as chaves nesse objeto correspondem
// aos IDs dos campos no seu formulário.
obj = {
    nome : {
        notEmpty : ["O nome não pode estar vazio"], 
        maxLength : [100, "O nome não pode ter mais que 100 caracteres"],
        minLength : [10, "O nome não pode ter menos de 10 caracteres"]
    },
    telefone : {
        maxLength : [12, "O telefone não pode ter mais que 12 caracteres"],
        minLength : [8, "O telefone não pode ter menos que 8 caracteres"]
    }
};


// Aqui eu explico a lógica passo a passo
function check(obj, validadores){

    var el, campo, valor, criterio, mensagem, funcao, argumentos;

    // Pega cada chave de campo no objeto
    for(campo in obj) {
    
        // O elemento do DOM correspondente ao campo
        el = document.getElementById(campo);
        
        // O valor do campo
        valor = el.value;
        
        // Loop nas definições dos critérios de validação de cada campo
        for(criterio in obj[campo]) {
            
            // pega a mensagem na array
            mensagem = obj[campo][criterio].slice(-1);
            
            // referência à função que será usada
            funcao = validadores[criterio];
            
            // prepara uma nova array para passar como argumentos da função;
            // essa array é o valor do campo e os dados de validação, exceto mensagem
            argumentos = [valor].concat(obj[campo][criterio].slice(0, -1));
            
            // invoca a função com os argumentos que preparamos. se ela retornar
            // false, alerta a mensagem e interrompe a validação
            if(!funcao.apply(null, argumentos)) {
                alert(mensagem);
                
                // Interrompe a checagem se algo não validar
                return false;
            }
        }
    }

    // Passou em todas as validações
    return true;
};

// Clique no botão
document.getElementById('validar').addEventListener('click', function() {
    if(!check(obj, validadores)) {
        alert('NÃO VALIDOU');  
    } else {
        alert('VALIDOU')  
    }
});

<input id="nome">
<input id="telefone">
<button type="button" id="validar">Validar</button>