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