How to validate multiple fields in a form?

Question

I’m in need of some help with some basic logic... I have a form with 4 fields that when I do the submit on the button, I need to validate if at least one of the search fields has been filled in. I could only validate hi first field, but when I leave the first blank and fill in the second, says that no field has been filled... Could someone help me?

function valida_form() {
    if ((document.getElementById("numeroPedido").value == null || document.getElementById("numeroPedido").value == "") && (document.getElementById("codigoCliente").value == null || document.getElementById("codigoCliente").value == "") && (document.getElementById("dataInicial").value == "" || document.getElementById("dataInicial").value == null) && (document.getElementById("dataFinal").value == "" || document.getElementById("dataFinal").value == null)) {
        alert('Informe um filtro de pesquisa.');
        return false
    } else {
        return true
    }
}

Answer 1

First, let’s simplify your code:

function null_or_empty(str) {
    var v = document.getElementById(str).value;
    return v == null || v == "";
}

function valida_form() {
    if (null_or_empty("numeroPedido")
            && null_or_empty("codigoCliente")
            && null_or_empty("dataInicial")
            && null_or_empty("dataFinal"))
    {
        alert('Informe um filtro de pesquisa.');
        return false;
    }
    return true;
}

That is if all fields are empty, it asks to inform the filter. Otherwise (ie if at least one has been filled), it accepts.

Maybe what you wanted is to use || instead of &&, so that the code will only accept if all of them are filled in.

It may be that your validation logic should be more sophisticated:

function valida_form() {
    var vazio1 = null_or_empty("numeroPedido");
    var vazio2 = null_or_empty("codigoCliente");
    var vazio3 = null_or_empty("dataInicial");
    var vazio4 = null_or_empty("dataFinal");

    if (vazio1 && vazio2 && vazio3 && vazio4) {
        alert('Informe um filtro de pesquisa.');
        return false;
    }
    if (!vazio1 && !valida_numero_pedido()) {
        alert('Informe um número de pedido válido.');
        return false;
    }
    if (!vazio2 && !valida_codigo_cliente()) {
        alert('Informe um código de cliente válido.');
        return false;
    }
    if (!vazio3 && !valida_data_inicial()) {
        alert('Informe uma data inicial válida.');
        return false;
    }
    if (!vazio4 && !valida_data_final()) {
        alert('Informe uma data final válida.');
        return false;
    }

    return true;
}

In addition, it is worth checking that the fields were not filled only with spaces:

function null_or_empty(str) {
    var v = document.getElementById(str).value;
    return v == null || v.trim() == "";
}