validate all form fields with Javascript

Asked

Viewed 437 times

2

Good morning, all right?

I am starting in Javascript and I need to validate all the fields in the form below through this. I was able to validate the first 6 fields, radio and checkbox are missing.

Some help?

Follows code below:

<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Freedom/C></title>
    <link rel="stylesheet" type="text/css" href="Freedom.css"/>
    <script language="JavaScript" type="text/javascript">
        function validar() {
            var Setor = fOcorrencia.Setor.value;
            var Resp = fOcorrencia.Resp.value;
            var TipoO = fOcorrencia.TipoO.value;
            var RespApOc = fOcorrencia.TipoO.value;
            var Descricao = fOcorrencia.Descricao.value;
            var Plano = fOcorrencia.Plano.value;

            if (Setor == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (Resp == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (TipoO == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (RespApOc == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (Descricao == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (Plano == "") {
                alert("Preencha todos os campos");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<div>
    <h1>Controle de Qualidade</h1>
    <h2 align="center">Cadastro de Ocorrências</h2>
</div>
<form method="post" id="fOcorrencia" name="fOcorrencia" action="mailto:[email protected]">
    <fieldset>
        <legend>Descreva</legend>
        <p><label for="cSetor">Setor:</label><input type="text" size="70" maxlength="70" name="Setor" id="cSetor"/></p>
        <p><label for="cResp">Responsável:</label><input type="text" size="70" maxlength="70" name="Resp" id="cResp"/></p>
        <p><label for="cTipoO">Tipo de ocorrência:</label><input type="text" size="70" maxlength="70" name="TipoO" id="cTipoO"/></p>
        <p><label for="cRespApOc">Responsável pela aprovação da ocorrência:</label><input type="text" name="RespApOc" size="70" maxlength="70" id="cRespApOc"/></p>
        <p><label for="cDescricao">Descrição da ocorrência:</label><textarea name="Descricao" id="cDescricao" cols="70" rows="5"></textarea></p>
        <p><label for="cPlano">Plano de ação:</label><textarea name="Plano" id="cPlano" cols="70" rows="5"></textarea></p>
    </fieldset>
    <fieldset>
        <legend>Tipo</legend>
        <input type="radio" name="Tipo" id="cDisp"/><label for="cDisp">Disposição</label>
        <input type="radio" name="Tipo" id="cCorr"/><label for="cCorr">Correção</label>
    </fieldset>
    <fieldset>
        <legend>Natureza</legend>
        <label><input type="checkbox" value="Prod"/>Produção</label>
        <label><input type="checkbox" value="Admin"/>Admnistrativo</label>
        <label><input type="checkbox" value="Amb"/>Ambiental</label>
    </fieldset>
    <input type="submit" onclick="return validar()" value="Enviar Ocorrência"/>
</form>
</body>
</html>
javascript form validation

1 answer

3

You can take the elements of the kind radio and checkbox as follows:

1 - All elements must have the attribute name (in this example captured the same by this attribute)

2 - In the capture, we need to verify the amount of items that were selected (checked), why in the selection used: ('input[name="checkNatureza"]:checked').length; because it will return the amount of elements checked.

To perform the check, simply check if the value captured in the variables is equal to zero, if it is, it will enter the if and will not let the form be sent.

Below the complete example:

function validar() {
            var Setor = fOcorrencia.Setor.value;
            var Resp = fOcorrencia.Resp.value;
            var TipoO = fOcorrencia.TipoO.value;
            var RespApOc = fOcorrencia.TipoO.value;
            var Descricao = fOcorrencia.Descricao.value;
            var Plano = fOcorrencia.Plano.value;
            
            //captura o número de itens "selecionados"
            var Tipo = document.querySelectorAll('input[name="Tipo"]:checked').length;
            
            //captura o número de itens "checados"
            var Natureza = document.querySelectorAll('input[name="checkNatureza"]:checked').length;
            
          

            if (Setor == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (Resp == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (TipoO == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (RespApOc == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (Descricao == "") {
                alert("Preencha todos os campos");
                return false;
            }
            if (Plano == "") {
                alert("Preencha todos os campos");
                return false;
            }
            
             if (Tipo == 0) {
                alert("Preencha todos os campos");
                return false;
            }
            
             if (Natureza == 0) {
                alert("Preencha todos os campos");
                return false;
            }
            return true;
        }
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Freedom/C></title>
    <link rel="stylesheet" type="text/css" href="Freedom.css"/>   
</head>
<body>
<div>
    <h1>Controle de Qualidade</h1>
    <h2 align="center">Cadastro de Ocorrências</h2>
</div>
<form method="post" id="fOcorrencia" name="fOcorrencia" action="mailto:[email protected]">
    <fieldset>
        <legend>Descreva</legend>
        <p><label for="cSetor">Setor:</label><input type="text" size="70" maxlength="70" name="Setor" id="cSetor"/></p>
        <p><label for="cResp">Responsável:</label><input type="text" size="70" maxlength="70" name="Resp" id="cResp"/></p>
        <p><label for="cTipoO">Tipo de ocorrência:</label><input type="text" size="70" maxlength="70" name="TipoO" id="cTipoO"/></p>
        <p><label for="cRespApOc">Responsável pela aprovação da ocorrência:</label><input type="text" name="RespApOc" size="70" maxlength="70" id="cRespApOc"/></p>
        <p><label for="cDescricao">Descrição da ocorrência:</label><textarea name="Descricao" id="cDescricao" cols="70" rows="5"></textarea></p>
        <p><label for="cPlano">Plano de ação:</label><textarea name="Plano" id="cPlano" cols="70" rows="5"></textarea></p>
    </fieldset>
    <fieldset>
        <legend>Tipo</legend>
        <input type="radio" name="Tipo" id="cDisp"/><label for="cDisp">Disposição</label>
        <input type="radio" name="Tipo" id="cCorr"/><label for="cCorr">Correção</label>
    </fieldset>
    <fieldset>
        <legend>Natureza</legend>
        <label><input type="checkbox" value="Prod" name="checkNatureza"/>Produção</label>
        <label><input type="checkbox" value="Admin"name="checkNatureza" />Admnistrativo</label>
        <label><input type="checkbox" value="Amb" name="checkNatureza"/>Ambiental</label>
    </fieldset>
    <input type="submit" onclick="return validar()" value="Enviar Ocorrência"/>
</form>
</body>
</html>

Isolated example (radios and checkbox inputs only):

function validar() {            
            
            //captura o número de itens "selecionados"
            var Tipo = document.querySelectorAll('input[name="Tipo"]:checked').length;
            
            //captura o número de itens "checados"
            var Natureza = document.querySelectorAll('input[name="checkNatureza"]:checked').length;
                                  
             if (Tipo == 0) {
                alert("Preencha todos os campos");
                return false;
            }
            
             if (Natureza == 0) {
                alert("Preencha todos os campos");
                return false;
            }
            return true;
        }
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Freedom/C></title>
    <link rel="stylesheet" type="text/css" href="Freedom.css"/>   
</head>
<body>
<div>
    <h1>Controle de Qualidade</h1>
    <h2 align="center">Cadastro de Ocorrências</h2>
</div>
<form method="post" id="fOcorrencia" name="fOcorrencia" action="mailto:[email protected]">
    
    <fieldset>
        <legend>Tipo</legend>
        <input type="radio" name="Tipo" id="cDisp"/><label for="cDisp">Disposição</label>
        <input type="radio" name="Tipo" id="cCorr"/><label for="cCorr">Correção</label>
    </fieldset>
    <fieldset>
        <legend>Natureza</legend>
        <label><input type="checkbox" value="Prod" name="checkNatureza"/>Produção</label>
        <label><input type="checkbox" value="Admin"name="checkNatureza" />Admnistrativo</label>
        <label><input type="checkbox" value="Amb" name="checkNatureza"/>Ambiental</label>
    </fieldset>
    <input type="submit" onclick="return validar()" value="Enviar Ocorrência"/>
</form>
</body>
</html>

Tip: Do not provide your real email, as you may end up being a victim of spam messages, always use illustrative data for demonstration of examples.

Browser other questions tagged javascript form validation

You are not signed in. Login or sign up in order to post.