<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h1 class="well">Cadastro de clientes</h1>
<div class="col-lg-12 well">
<div class="row">
<form>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 form-group">
<label>* Nome: </label>
<input id="textNome" onkeyup="valname();" class="form-control" placeholder="Digite seu nome..." type="text" required autofocus>
<div id="validacao" style="display:none;color:red;" >Campo nome vazio e/ou incorreto</div>
</div>
<div class="col-sm-6 form-group">
<label> Sobrenome:</label>
<input type="text" placeholder="Digite seu sobrenome..." class="form-control">
<div id="validacao" style="display:none;color:red;" >Campo nome vazio e/ou incorreto</div>
</div>
</div>
<div class="form-group">
<label>* Senha:</label>
<input type="password" id="senha" placeholder="Digite sua senha..." class="form-control">
<span style="width:0%;" id="senha_button" class="input-group-addon"><span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span></span>
<div id="validacao2" style="display:none;color:red;" >Campo Senha vazio e/ou incorreto</div>
</div>
<div class="form-group">
<label>* Confirmar Senha:</label>
<input type="password" onchange="valsenha();" id="rsenha" placeholder="Confirmar sua senha..." class="form-control">
<div id="validacao2.1" style="display:none;color:red;" >Campo Senha vazio e/ou incorreto</div>
</div>
<div class="form-group">
<label>* Telefone:</label>
<input type="text" placeholder="Digite seu telefone..." class="form-control">
</div>
<div class="form-group">
<label>* E-mail:</label>
<input id="textEmail" onkeyup="valemail();" class="form-control" placeholder="Digite seu E-mail..." type="email" required>
<div id="validacao1" style="display:none;color:red;" >Campo E-mail vazio e/ou incorreto</div>
</div>
<div class="form-group">
<label>* CPF:</label>
<input type="text" class="form-control" id="cpf" name="cpf" onkeypress="return valCPF(event,this);return false;" onblur="if(consistenciaCPF(this.value)) this.select();" maxlength="14" required="" placeholder="Digite seu CPF...">
</div>
<div class="input-append date form_datetime">
<button type="button" class="btn btn-lg btn-info">Submit</button>
</form>
</div>
</div>
</div>
@import "font-awesome.min.css";
@import "font-awesome-ie7.min.css";
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 15px;
padding-left: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
padding-bottom: 19px;
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
// validação de nome
function valname(){
//pegando variavel do html
var nome = document.getElementById("textNome").value;
if(nome === "teste" || nome == ""){
//se nome igual teste ou vario
//valor do campo ficar vazio
document.getElementById("textNome").value="";
//mostra a div
document.getElementById("validacao").style.display = "block";
//faz borda vermelha
document.getElementById("textNome").style.border = "2px solid red";
document.getElementById("textNome").focus();
return false;
}
else{
document.getElementById("validacao").style.display = "none";
document.getElementById('textNome').style.border ="";
}
return true;
document.form.sumbit();
}
function valemail(){
var email = document.getElementById("textEmail").value;
if(email == "teste" || email == ""){
document.getElementById("textEmail").value="";
document.getElementById("validacao1").style.display = "block";
document.getElementById("textEmail").style.border = "2px solid red";
document.getElementById("textEmail").focus();
return false;
}
else{
document.getElementById("validacao1").style.display = "none";
document.getElementById('textEmail').style.border ="";
}
return true;
document.form.sumbit();
}
function valsenha(){
var senha = document.getElementById("senha").value;
var rsenha = document.getElementById("rsenha").value;
if(senha != rsenha){
document.getElementById("rsenha").value="";
document.getElementById("validacao2").style.display="block";
document.getElementById("validacao2.1").style.display="block";
document.getElementById("senha").style.border="2px solid red";
document.getElementById("rsenha").style.border="2px solid red";
document.getElementById("rsenha").focus();
}
else{
document.getElementById("validacao2").style.display="none";
document.getElementById("validacao2.1").style.display="none";
document.getElementById("senha").style.border="";
document.getElementById("rsenha").style.border="";
}
}
$(document).ready(function(){
$("#senha_button").mouseup(function(){
$("#senha").attr("type", "password");
});
$("#senha_button").mousedown(function(){
$("#senha").attr("type", "text");
});
});
jQuery("input.telefone")
.mask("(99) 9999-9999")
.focusout(function (event) {
var target, phone, element;
target = (event.currentTarget) ? event.currentTarget : event.srcElement;
phone = target.value.replace(/\D/g, '');
element = $(target);
element.unmask();
if(phone.length > 10) {
element.mask("(99)99999-9999");
}
});
/*permite somente valores numéricos*/
function valCPF(e,campo){
var tecla=(window.event)?event.keyCode:e.which;
if((tecla > 47 && tecla < 58)){
mascara(campo, '###.###.###-##');
return true;
}
else{
if (tecla != 8) return false;
else return true;
}
}
/*permite somente valores numéricos*/
function valTELEFONE(e,campo){
var tecla=(window.event)?event.keyCode:e.which;
if((tecla > 47 && tecla < 58)){
mascara(campo, '(##)####-####');
return true;
}
else{
if (tecla != 8) return false;
else return true;
}
}
/*permite somente valores numericos*/
function valCEP(e,campo){
var tecla=(window.event)?event.keyCode:e.which;
if((tecla > 47 && tecla < 58)){
mascara(campo, '#####-###');
return true;
}
else{
if (tecla != 8) return false;
else return true;
}
}
/*cria a mascara*/
function mascara(src, mask){
var i = src.value.length;
var saida = mask.substring(1,2);
var texto = mask.substring(i);
if (texto.substring(0,1) != saida)
{
src.value += texto.substring(0,1);
}
}
/*consistencia se o valor do CPF e um valor valido seguindo os criterios da Receita Federal do territorio nacional*/
function consistenciaCPF(campo) {
cpf = campo.replace(/\./g, '').replace(/\-/g, '');
erro = new String;
if (cpf.length < 11) erro += "Sao necessarios 11 digitos para verificacao do CPF! \n\n";
var nonNumbers = /\D/;
if (cpf == "00000000000" || cpf == "11111111111" || cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf == "99999999999"){
erro += "Numero de CPF invalido!"
}
var a = [];
var b = new Number;
var c = 11;
for (i=0; i<11; i++){
a[i] = cpf.charAt(i);
if (i < 9) b += (a[i] * --c);
}
if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
b = 0;
c = 11;
for (y=0; y<10; y++) b += (a[y] * c--);
if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10])){
erro +="CPF não existe!";
}
if (erro.length > 0){
alert(erro);
return true;
}
return false;
}
