1

Como posso realizar a validação de vários campos no formulário onde esses campos são criados dinamicamente?

Exemplo:

<tr align="right">
  <td style="font-size: 11px;"><b>Item 1 - Descontos:</b></td>
  <td><input type="text" name="Desconto11" value="30" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto12" value="5" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto13" value="5" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto14" value="" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto15" value="" class="inputs" size="2" placeholder="%"></td>
</tr>
<br>

<tr align="right">
  <td style="font-size: 11px;"><b>Item 2 - Descontos:</b></td>
  <td><input type="text" name="Desconto21" value="30" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto22" value="5" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto23" value="5" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto24" value="" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto25" value="" class="inputs" size="2" placeholder="%"></td>
</tr>

Coloquei o campo DescontoX1 até DescontoX5 onde X é representado pelo numero do item ao qual mesmo faz parte.

  1. "Onde o DescontoX1 não pode ultrapassar o valor de 30"
  2. "Onde o DescontoX2 não pode ultrapassar o valor de 5 e só pode ser preenchido se o DescontoX1 não estiver vazio."
  3. "Onde o DescontoX3 não pode ultrapassar o valor de 5 e só pode ser preenchido se o DescontoX2 não estiver vazio."
  4. "Onde o DescontoX4 não pode ultrapassar o valor de 3 e só pode ser preenchido se o DescontoX3 não estiver vazio."
  5. "Onde o DescontoX5 não pode ultrapassar o valor de 2 e só pode ser preenchido se o DescontoX4 não estiver vazio."

Lembrando que o item pode ir de 1 até 999.

Alguém poderia dar um exemplo de como fazer isso?

2
  • Basta criar uma validação no submit do form verificando pela class dos inputs, ao invés de usar class=inputs para todos, defina uma class para cada grupo (não precisa remover o inputs caso use para outra coisa, pode ter n classes, ex: class="inputs desconto1", class="inputs desconto2" 29/04/2015 às 19:26
  • Creio que com jquery você consiga. Da pra formar validações na própria regra de propriedades. Tente utilizar o jqueryvalidation.org
    – dHEKU
    29/04/2015 às 19:54

2 Respostas 2

1

Vejo que tens um padrão de 5 inputs em cada linha tr de uma tabela. Podes criar um objeto ou array com as regras da validação e depois mapear essas linhas da tabela com o resultado da validação de cada uma.

O método que escolhes para mostrar ao usuário que faltam dados vais ter de escolher. No meu exemplo vou fazer esse alerta visual na propria linha. Podes adaptar ao que precisas. Precisas também especificar se um campo vazio é aceite ou não.

Aqui fica um exemplo:

var regras = [30, 5, 5, 3, 2];

function validar() {
    var linhasFalhadas = $('table tr').each(function () {
        var inputsNaoValidados = $(this).find('input').filter(function (i) {
            var value = parseInt(this.value, 10) || 0;
            return value > regras[i];
        });
        if (inputsNaoValidados.length) $(this).addClass('not_valid');
        else $(this).removeClass('not_valid');;
    });
}
validar();

jsFiddle: http://jsfiddle.net/yaoa3539/

5
  • script interessante, porém existem outros inputs na mesma pagina, e não estou conseguindo fazer o mesmo funcionar no OnSubmit... 4/05/2015 às 17:13
  • @RobertoValentim junta o código todo num jsFiddle para eu poder ver e perceber melhor o teu código. Viste o meu exemplo? funciona como querias no exemplo?
    – Sergio
    4/05/2015 às 17:22
  • eu vi o seu exemplo sim, funciona quando damos o refresh na pagina, o meu problema é no OnSubmit... Segue o código HTML reduzido para que você possa entender melhor jsFiddle 4/05/2015 às 18:26
  • @RobertoValentim ok, então podes usar assim: jsfiddle.net/yaoa3539/2
    – Sergio
    4/05/2015 às 21:40
  • O interessante é que no jsfiddle está funcionando... porém quando tento colocar o mesmo exemplo com os 7 inputs que tem por item ... 5/05/2015 às 12:38
-1

Exemplo simples de percorrer todos os inputs do form com javascript VAI DAR O ERRO SE ESTIVER ALGUM EM BRANCO *Não testei mas aparentemente não vi erro.

$(document).ready(function () {
    $("#cadastro").click(function (e) {
        // bloqueando envio do form
        e.preventDefault();
        var erros = 0;
        // verifica se ha campos vazios
        $("#form1 input").each(function () {
            // conta erros
            $(this).val() == "" ? erros++ : "";
        });
        // verifica se ha erros
        if (erros > 0) {
            alert("Existe(em) campo(os) vazio(os) neste fomulário");
        } else {
            //return true;  
            $("#form1").submit()
        }
    });
});
4
  • @Roberto-Valentim você importou as bibliotecas do Jquery para a página antes de testar? 29/04/2015 às 19:34
  • Milrak, mais a questão não é somente verificar se estão em branco... é varrer todos os inputs verificando os critérios... pode até ser no onkeyup para verificar no ato da digitação... 29/04/2015 às 20:22
  • Onda ele faz $(this).val() você poderia pegar $(this).attr('id') e assim saber o id, como você disse que casa input é numerado 1,2,3. tem como fazer um if 29/04/2015 às 20:32
  • $("#form1 input").each(function(){ // conta erros $(this).val() == "" ? erros++ : ""; //tira o nome Desconto e fica só com os números para facilitar a identificação com la~ço de repetição if ($(this).attr('id') == "1"){ $(this).val() > "30" ? erros++ : ""; } else if ($(this).attr('id') == "2"){ $(this).val() > "5" ? erros++ : ""; } }); 29/04/2015 às 20:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .