0

Tenho uma função que valida meus campos no evento focusout, porém, agora preciso percorrer todos os campos no submit do form, sei que deveria usar um for, mas não sei como.

$("input[type='text'],textarea").focusout(function () {
    validar($(this))
});

$("#formcontato").submit(function (event) {
    event.preventDefault();
    //O for entraria aqui?
});

$('input, textarea').keypress(function (e) {
    if (e.which == 13 && validar()) {
        request();
        return false;
    }
});

function request() {
    $.ajax({
        url: "minha api...",
        method: "POST",
        data: $(this).serialize(),
        dataType: "json",
        beforeSend: function () {
            //antesEnvio();
        },
        success: function () {
            //sucessoRequest();
        },
        error: function () {
            //erroRequest();
        }
    });
}


function validar(input) {
    var valido = false;
    if (input.attr("id") === "email") {
        var filtro = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
        if (filtro.test(input.val())) {
            input.css("border-color", "green");
        } else {
            input.css("border-color", "red");
            valido = false;
        }
    }
    else if (input.val() === "") {
        input.css("border-color", "red");
        valido = false;
    }
    else if (input.val() != "") {
        input.css("border-color", "green");
    }

    return valido;
}
1
  • 1
    Uma forma fácil é definir variáveis globais com o valor false para cada validação, caso passem irão recebendo true, na hora do submit basta verificar se todas estão true. 20/10/2017 às 11:31

2 Respostas 2

4

Seguindo o mesmo padrão de validação que vc está usando agora, digo para fazer o seguinte:

Primeiro vc deve fazer sua função validar() retornar true sempre que o campo estiver OK, e continuar retornando false quando algo estiver errado no preenchimento do campo.

Depois é só colocar o código abaixo no submit do seu form.

Ficaria assim:

$("#formcontato").submit(function (event) {
    event.preventDefault();
    var success =[],
        inputs = this.elements;

    for (var i = 0, length = inputs.length; i < length; i++ {
        success.push(validar($(inputs[i])));
    }

    if (success.indexOf(false) >= 0) {
        return;
    }

    this.submit();
});

Explicando o que fiz:

A variável success é um array. A cada loop do for a função validar() vai retornar true ou false (se o campo estiver ok ou não), e esse retorno sempre é inserido na variável array success através do método push().

O método push() serve para inserirmos um novo valor no final de um array.

Ou seja, ao final do loop nosso array estará preenchido com vários true e false.

Seguindo...

O método indexOf() serve para buscarmos em um array um determinado valor. Se ele encontra o valor passado como argumento ele retorna a posição dentro do array (índice) onde o valor se encontra. Se ele NÃO encontra ele simplesmente retorna o valor -1.

No nosso caso eu verifico se no array success existe algum FALSE. Se tiver, eu interrompo o script antes de chamar o submit() manualmente.

2
  • Muito obrigado, me salvou. Mas poderia me explicar a função? Minhas dúvidas são o que esses trechos: success.push(validar($(inputs[i]))); ------ success.indexOf(false) >= 0 20/10/2017 às 12:24
  • @TiagoSilveira, editei a minha resposta para sanar suas dúvidas. :) 20/10/2017 às 13:05
3

Para validar texto e e-mail no submit você pode combinar o type mais required do HTML5 que ele não irá permitir a submissão se o dado for inválido.

Exemplo

<form>
    <input type="email" required>E-mail
    <br>
    <input type="text" required>Texto
    <br>
    <input type="submit">Enviar
</form>

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 .