Function invoking other functions

Creates an object with these functions. In the element joins a data- field with the name of the function that must execute and you have a functional and easy to understand code.

For example:

No HTML:

<input type="text" id="input_nome_cad" data-regra="valida_nome" ...etc
                                       ^----------------------^

And then in JavaScript:

var regras = {
    valida_nome: function() {

    },
    valida_email: function() {

    },
    valida_tel: function() {

    },
    valida_senha: function() {

    }
}

var form = document.getElementById('usuario_form');
var enviar = document.querySelector('.btn_enviar_cad');
var inputs = [].slice.call(document.querySelectorAll('.input')); // para criar uma array
enviar.addEventListener('click', function(e) {
    e.preventDefault(); // para não enviar ainda
    var validos = inputs.filter(function(el) {
        var fn = el.dataset.regra;
        var valido = regras[fn](el); // aqui vai validar o input e retorna true se validar correto
        // aqui podes fazer algum aviso caso valido != true
        return valido;
    });
    if (validos.length == input.length) form.submit(); // todos são válidos!
})

You can put the validation in the moment the user tries to submit the data of form , then you do all the validation and if you have an error, just prevent the data from being sent:

<form id="usuario_form" name="usuarios_form" method="POST" onsubmit="return validaForm()" action="#">
...
</form>

<script>
    function ID(id) {
        return document.getElementById(id);
    }

    function validaForm() {
        if(validaNome() && validaEmail() && validaTel() && validaSenha()) {
            return true;
        }

        return false;
    }

    function validaNome() {
        var nome = ID('input_nome_cad');

        if(nome.value == '')
            return false;

        return true;
    }

    function validaEmail() {
        // ...
    }

    function validaTel() {
        // ...
    }

    function validaSenha() {
        // ...
    }

</script>

I hope I have helped \ o /

If what you want to do is validate the user's input (and you do not need to make ajax calls or more complicated things) you can simply use pattern if the type that HTML already gives you: / p>

<input type="email" />
<input type="number" min="0" max="1"/>

You can also use type=text allied to pattern :

<input type="text" pattern="/[a-z_]/g" placeholder="just lower case letters and underscores" />

and you can still use pattern with all other input types

<input type="email" pattern="/gmail.com$/" placeholder="we only accept gmail accounts" />

When you click on submit if anything fails, it natively will stop submitting the form.

In the case of JS, you can use onchange . ,

document.querySelector('#id,.classe,element').onchange(function(){});

or

<input id="id" type="email" onchange="return validar_email(event);"/>