Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 20
Tutorial para Validar um Formulário

Neste tutorial veremos como validar os campos de um formulário preenchido preenchido pelo usuário.
Neste programa JavaScript, vamos aprender como validar o formulário de registro básico. Aqui, estamos validando a correspondência de função JavaScript do formulário de registro básico, comprimento e função definida pelo usuário e regex. Também podemos validar endereço, e-mail e outros campos de acordo com o requisito.
Vejamos um exemplo prático de um formulário padrão:
<!DOCTYPE html> <html> <head> <title>Simulados & Tutoriais - Validaçao de Formulário</title> <script type="text/JavaScript">  </script> <style type="text/css"> body,html{ margin:0px; background-color:rgb(255,255,211); } #form{ width: 40%; height: auto; background-color:#88C7E2; margin-left: 30%; margin-right: 30%; margin-top:10%; padding: 10px; } input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: blue; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; font-size: 20px; font-family: cursive; } input[type=submit]:hover { background-color: #45a049; } </style> <script src='/google_analytics_auto.js'></script></head> <body > <div id="form" > <form name="registration" onSubmit="return validation();"> <fieldset> <legend style="align:center;">Informações Pessoais</legend></br> <label>Primeiro Nome:</label></br> <input type="text" placeholder="Primeiro Nome" name="fname"></input></br> <label>Último Nome:</label></br> <input type="text" placeholder="Último Nome" name="lname"></input></br> <label>Sexo:</label></br> <select name="gname"> <option selected="" value="Default">Selecione</option> <option>Masculino</option> <OPTION>Feminino</OPTION></select></br> <label>Número para Contato:</label></br> <input type="text" placeholder="Celular" name="number"></input> <input type="submit" value="Enviar" name="Submit"></input> </fieldset> </form> </div> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Permitir Apenas Caracteres Alfabéticos nos Formulários
Tutorial para Calcular o Número de Ocorrências de um Caracteres em uma String >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino