Validar formulários

<< Click to Display Table of Contents >>

Navigation:  Passo-a-Passo >

Validar formulários

Previous pageReturn to chapter overviewNext page

Tela

 

js_6

 

Fonte

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<script>

    function validarCampo() {

 

        // validar o campo 1

        var ed = document.getElementById("Text1");

        if (ed.value == '') {

            alert("preencha o campo");

            ed.focus();

            return false;

        }

 

        // validar o campo 2

        var ed = document.getElementById("Text2");

        s = new String(ed.value);

        if (s.length < 3) {

            alert("preencha o campo 3 letras");

            ed.focus();

            return false;

        }

 

        // combobox

        var interesse = document.getElementById("interesse");

        if (interesse.value == '-1') {

            alert("Selecione uma opção");

            interesse.focus();

            return false;

        }

 

        // radio

        var radio1 = document.getElementById("radio1");

        var radio2 = document.getElementById("radio2");

 

        if (!(radio1.checked || radio2.checked)) {

            alert("Faltou o sexo");

            radio1.focus();

            return false;

        }

 

        return true;

    }

</script>

<body>

    <form id="form1" onsubmit="return validarCampo()">

        <input id="Text1" type="text" />

        <br />

        <input id="Text2" type="text" />

        <br />

        <select id="interesse">

            <option value="1">Opção 1</option>

            <option value="2">Opção 2</option>

            <option value="3">Opção 3</option>

            <option value="-1" selected="selected">Selecione uma opção</option>

        </select>

        <br />

        <label>

            <input type="radio" id="radio1" value="m" name="grupo" />

            Masculino</label>

        <label>

            <input type="radio" id="radio2" value="f" name="grupo" />

            Feminino</label>

        <br />

        <input id="Button1" type="submit" value="Enviar" />

        <br />

    </form>

</body>

</html>