validate all form fields with JavaScript

Question

validate all form fields with JavaScript

Navigation

#1 by (3 votes)

2

Good morning, how are you?

I'm starting in JavaScript and I need to validate all fields in the code form below through this one. I was able to validate the first 6 fields, radio missing and checkbox.

Any help?

Follow the 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

asked by anonymous 29.10.2018 / 17:12

1 answer

Problem with date Laravel Close jar programmatically

score 3 · Answer 1

You can get elements of type radio and checkbox as follows:

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

2 - In the capture, we need to check the number of items that have been selected (checked), so in the selection I used: ('input[name="checkNatureza"]:checked').length; because it will return the number of elements checked.

In order to perform the verification, it is enough to check if the value captured in the variables is zero, if it is, it will enter if and will not let the form be sent.

Below the full 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 checkboxes 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 because you may end up being a victim of spam messages, always use illustrative data to demonstrate examples.