Revista PROGRAMAR Edição 51 - Dezembro 2015

[apocsantos]

Revista PROGRAMAR

Edição 51 - Dezembro de 2015

(clica para download)

Nesta edição continuaremos também a premiar os autores dos três melhores artigos, dado o sucesso nas edições anteriores. E os leitores devem dar a sua opinião para que possamos premiar correctamente. Para isso vote em http://bit.do/ProgramarED51_V

Assim nesta edição trazemos até si, como artigo de capa, um artigo sobre Travessia de uma árvore de diretórios usando recursividade de Patrício Domingues, Vítor Carreira e Carlos Grilo . Nesta 51ª edição pode ainda encontrar os seguintes artigos:

• Validação de formulários em Javascript
• Aplicações Mobile com o Xamarin Studio
• Plotagem de dados “em tempo real” com Python usando matPlotLib
• Xamarin 4 tem tudo que precisa para criar óptimas aplicações móveis!
• IPv6 para Programadores
• Aquisição de dados via TCP/IP com GENUINO (ARDUINO)
• Cross-Platform - “A soma de todas as mudanças”
• MySQL
• Programação em Python - Fundamentos e resolução de Problemas
• Windows 10: As novidades da actualização de Novembro (BUILD 10586 - VERSION 1511)
• ECMASCRIPT 2015: A nova versão do Javascript
• Raspberry PI Zero – O novo membro da família!
• BETA-I HACKATHON LISBON HAS BEEN HACKED
• XAMARIN 4.0 – Tudo o que precisa para criar as suas aplicações móveis
• Impressoras 3D – Escolhe a tua
• Xamarin para Docentes e Estudantes
• High Tech Fashion
• Projecto em Destaque P@P - PORTUGOL +

[Mais info]

[pedro43]

boa noite,

por acaso vim ter aqui e dei uma olhadela à revista para ler o artigo sobre o es2015. mas pelo meio li o "Validação de formulários em Javascript"

Permitam-me umas correcções:

* não corre.

Mesmo corrigido o código:

* não valida o nome com as condições necessárias, basta não estar vazio

* não valida o email, basta ter @

* e não faz mais nada.

pq?

frm.nome.value == """

 

frm.nome.value.lenght < 3

 

// pq 3? em lado nenhum avisa desta regra.

frm.email.valueOf.indexOf(".") == -1

 

Uncaught TypeError: frm.email.valueOf.indexOf is not a function.

corrigindo as double quotes, lenght por length e trocamos a validação do email por uma função nativa, continuamos. excepto se me chamar Zé.

Problemas:

* x = frm.sexo.lenght está de novo mal escrito.

* não ha necessidade de criar variáveis globais

* trocamos o id do input do valor "F"

* corrigimos o focus().

então o for fica

var escolhaSexo = -1, x;
for ( x = frm.sexo.length -1; x > -1; x--) {

Próximo passo:

if(frm.prof.value == "" || from.prof.value == "Todas") {

frm.prof ?

O que é prof? prof não existe, mas se existe cargo. trocamos então

from.prof ?

from também não existe, trocamos por frm

mas pouco importa pq não existe frm.cargo.value

inspeccionando frm.cargo sabemos que

console.log(frm.cargo.options)

0: option

1: option

2: option

3: option

4: option

length: 5

selectedIndex: 0

então:

var selected_prof = frm.cargo.options[frm.cargo.selectedIndex].text;

trocando o "Todas" por "Selecione o cargo", e frm.prof.focus() por frm.cargo.focus(), temos finalmente:

if( selected_prof === "" || selected_prof === "Selecione o cargo") {

Agora que já corrigimos o:

* nome

* email

* sexo

* cargo

falta claro, corrigir o último. Está quase...

if(frm.sobre.value == "" || frm.sobre.value == null) {

frm.sobre ?

Quer saber um pouco sobre mim, mas não existe caixa para escrever. Vamos então completar o html com

<textarea name="sobre"><textarea>

e se no fim, retornarmos true, temos finalmente qualquer coisa.

Podemos melhorar um bocadinho:

* trocar os alertas por mensagens no html, já que não serve de nada ao utilizador ter

que aceitar o ok no dialogo, se essa é a única opção.

* adicionamos umas labels

* trocamos o tipo de input do email.

No fim, tornamos os campos obrigatórios no proprio html.

O código final:

<script>

function validaForm(frm) {
    var error_input = document.getElementById('error_nome');
    if(frm.nome.value === "" || frm.nome.value === null || frm.nome.value.length < 3) {
error_input.innerHTML = "Por favor, indique o seu nome, com o mínimo de 3 letras.";
    error_input.className = "error active";
    frm.nome.focus();
        return false;
    }
error_input.innerHTML = "";
error_input.className = ""; error_input = document.getElementById('error_email');
    if( !frm.email.validity.valid ){

error_input.innerHTML = "Por favor, indique um e-mail válido.";
    error_input.className = "error active";
    frm.email.focus();
        return false;
    }
error_input.innerHTML = "";
error_input.className = "";

error_input = document.getElementById('error_sexo');
var escolhaSexo = -1, x;
for ( x = frm.sexo.length -1; x > -1; x--) {
        if(frm.sexo[x].checked) {
        escolhaSexo = x;
        }
    }

    if(escolhaSexo === -1) {
        error_input.innerHTML = "Qual o seu sexo?";
    error_input.className = "error active";
    frm.sexo[0].focus();
        return false;
    } error_input.innerHTML = "";
error_input.className = "";

error_input = document.getElementById('error_cargo');

    var selected_prof = frm.cargo.options[frm.cargo.selectedIndex].text;

    if( selected_prof === "" || selected_prof === "Selecione o cargo") {
    error_input.innerHTML = "De momento, precisamos de especialistas nas três áreas indicadas";
    error_input.className = "error active";
frm.cargo.focus();
return false;
}
error_input.innerHTML = "";
error_input.className = "";

error_input = document.getElementById('error_sobre');
if(frm.sobre.value === "" || frm.sobre.value === null) {
error_input.innerHTML = "Por favor, conte-nos um pouco sobre si.";
    error_input.className = "error active";
        frm.sobre.focus();
        return false;
    }

return true;
}
</script><style>
input[type=email]{
width: 100%;
border: 1px solid #333;
margin: 0; font-family: inherit;
font-size: 90%;
box-sizing: border-box;
}
input:invalid{
border-color: #900;
}
input:focus:invalid {
outline: none;
background-color: #FDD;
}
.error {
width : 100%;
padding: 0;
font-size: 80%;
color: white;
background-color: #900;
border-radius: 0 0 5px 5px;
box-sizing: border-box;
}
.error.active {
padding: 0.3em;
}
</style>

<form name="frmTeste" method="get" action="#" onsubmit="return validaForm(this);">
<p>Validação de formulário</p>

<label for="nome">
    <span>Nome</span>
    <input type="text" id="nome" name="nome" required pattern=".{3,}" title="O mínimo são 3 letras">
    <span id="error_nome" aria-live="polite"></span>
</label>

<label for="mail">
    <span>Email</span>
    <input type="email" id="email" name="email" required>
    <span id="error_email" aria-live="polite"></span>
</label>
<p>Sexo:
<label><input type="radio" name="sexo" value="M" id="masc" required /> Masculino</label>
<label><input type="radio" name="sexo" value="F" id="fem" /> Feminino</label>
<span id="error_sexo" aria-live="polite"></span>
</p>

<p>Profissão
<select name="cargo" required>
    <option value="">Selecione o cargo</option>
    <option value="programador">Programador</option>
    <option value="designer">Designer</option>
    <option value="tester">Tester</option>
    <option value="todas">Todas</option>
</select><br>
<span id="error_cargo" aria-live="polite"></span>
</p>
<textarea required name="sobre"><textarea>
<span id="error_sobre" aria-live="polite"></span>

<button type="submit">Enviar</button>
</form>

continuação de bom trabalho.