Function calling other functions

Question

I have a form and 1 function to validate each field of this form

function valida_nome() {
		
}
	
function valida_email() {
		
}
	
function valida_tel() {
		
}
	
function valida_senha() {

}
	

<form id="usuario_form" name="usuarios_form" method="POST" action="#">
    <input type="text" id="input_nome_cad" class="input nome_cad" name="nome_cad" placeholder="Nome e Sobrenome"   onblur="valida_nome(this)">
    <br/>

    <input type="text" id="input_email_cad"class="input email_cad"name="email_cad"   	placeholder="Insira o Email"     onblur="valida_email(this)">
    <br/>

    <input type="text" id="input_conf_email_cad"class="input conf_email_cad"name="conf_email_cad"  placeholder="Confirme seu email" ><br/>
    <input type="text" id="input_tel_cad"	class="input tel_cad" name="tel_cad"     	placeholder="Insira um telefone"><br/>
    <input type="text"id="input_conf_tel_cad"	class="input tel_cad" name="conf_tel_cad"    placeholder="Confirme o telefone">
    <br/>

    <input type="password" id="input_senha_cad"class="input senha_cad"	 	 name="senha_cad"   	placeholder="Insira uma senha"><br/>
    <input type="password" id="input_conf_senha_cad" class="input senha_cad"	 	 name="conf_senha_cad"  placeholder="Confirme a senha">
    <input type="submit" 	class="btn_enviar_cad"	 name="enviar_cad"  value="Criar Conta" onclick="return valida_form(this)">
</form>

I would like a function from an event onload, performing all four functions, that is to say a function valida_form that would perform the functions valida_nome, valida_email, valida_tel, valida_senha.

Questions:

• Where is the place and how to proceed in the onload?
• Nesting functions in javascript, if this term is correct?

Answer 1

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

For example:

In 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!
})

Answer 2

You can place the validation at the moment the user tries to submit the data from form, then you do all the validation and if you have any error, just stop 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 helped the/

Answer 3

If what you want to do is a user input validation (and you don’t need to make ajax calls or more complicated things) you can just use patterns and the type HTML already gives you:

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

you can also use the type=text allied with the pattern:

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

and you can also use the pattern with all other input types

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

When you click on submit if something fails, natively will stop the form Submit.

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

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

or

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