Jump to content

Revista PROGRAMAR Edição 51 - Dezembro 2015


apocsantos
 Share

Recommended Posts

Revista PROGRAMAR

Edição 51 - Dezembro de 2015

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]

"A paciência é uma das coisas que se aprendeu na era do 48k" O respeito é como a escrita de código, uma vez perdido, dificilmente se retoma o habito"

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.