Commit fa2d848f authored by Carlos André's avatar Carlos André
Browse files

mascara de cpf

parent 9f50bed3
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</div> </div>
<div class="col-6"> <div class="col-6">
@component('componentes.input', ['label' => 'CPF']) @component('componentes.input', ['label' => 'CPF'])
<input type="text" class="form-control cpf" name="cpf[]" placeholder="CPF" required/> <input type="text" class="form-control cpf" name="cpf[]" placeholder="CPF" required onchange="checarCPFdoCampo(this)" onkeyup="mascaraCPF(this)"/>
<span id="cpf-invalido-1" class="invalid-feedback cpf-invalido" role="alert" style="overflow: visible; display:none"> <span id="cpf-invalido-1" class="invalid-feedback cpf-invalido" role="alert" style="overflow: visible; display:none">
<span style="font-style: italic;">CPF inválido.</span> <span style="font-style: italic;">CPF inválido.</span>
</span> </span>
......
...@@ -38,174 +38,8 @@ ...@@ -38,174 +38,8 @@
</div> </div>
</a> </a>
</div> </div>
<div class="col-md-12"> <div class="col-1">
<div class="collapse" id="collapseParticipante"> <button type="button" class="btn btn-danger" id="buttonRemover" onclick="removerPart(this)" >X</button>
<div class="container">
<div class="row">
<input type="hidden" name="funcaoParticipante[]" value="4">
<div class="col-md-12 mt-3"><h5>Dados do participante</h5></div>
<div class="col-6">
@component('componentes.input', ['label' => 'Nome completo'])
<input type="text" class="form-control " id="nomeParticipante" name="nomeParticipante[]" placeholder="Nome Completo" required />
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'E-mail'])
<input type="email" class="form-control" name="emailParticipante[]" placeholder="E-mail" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Data de nascimento'])
<input type="date" class="form-control" name="data_de_nascimento[]" placeholder="Data de nascimento" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'CPF'])
<input type="text" class="form-control cpf" name="cpf[]" placeholder="CPF" required/>
<span id="cpf-invalido-1" class="invalid-feedback cpf-invalido" role="alert" style="overflow: visible; display:none">
<strong style="font-style: italic;">CPF inválido.</strong>
</span>
<span id="cpf-valido-1" class="valid-feedback" role="alert" style="overflow: visible; display:none">
<strong style="font-style: italic;">CPF válido.</strong>
</span>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'RG'])
<input type="number" class="form-control" min="1" maxlength="8" name="rg[]" placeholder="RG" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Celular'])
<input type="tel" class="form-control celular" name="celular[]" placeholder="Celular" required/>
@endcomponent
</div>
<div class="col-md-12"><h5>Endereço</h5></div>
<div class="col-6">
@component('componentes.input', ['label' => 'CEP'])
<input type="number" class="form-control" name="cep[]" placeholder="CEP" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.select', ['label' => 'Estado'])
<select name="uf[]" id="estado" class="form-control" style="visibility: visible" required>
<option value="" disabled selected>-- Selecione uma opção --</option>
@foreach ($estados as $sigla => $nome)
<option @if(old('uf') == $sigla ) selected @endif value="{{ $sigla }}">{{ $nome }}</option>
@endforeach
</select>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Cidade'])
<input type="text" class="form-control" name="cidade[]" placeholder="Cidade" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Bairro'])
<input type="text" class="form-control" name="bairro[]" placeholder="Bairro" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Rua'])
<input type="text" class="form-control" name="rua[]" placeholder="Rua" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Número'])
<input type="text" class="form-control" name="numero[]" placeholder="Número" required/>
@endcomponent
</div>
<div class="col-12">
@component('componentes.input', ['label' => 'Complemento'])
<input type="text" id="complemento" class="form-control" name="complemento[]" pattern="[A-Za-z]+" placeholder="Complemento" required/>
@endcomponent
</div>
<div class="col-md-12"><h5>Dados do curso</h5></div>
<div class="col-6">
@component('componentes.input', ['label' => 'Universidade'])
<input type="text" class="form-control" name="universidade[]" placeholder="Universidade" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Curso'])
<input type="text" class="form-control" name="curso[]" placeholder="Curso" required/>
@endcomponent
</div>
<div class="col-6">
@component('componentes.select', ['label' => 'Turno'])
<select name="turno[]" class="form-control" required>
<option value="" disabled selected>-- Selecione uma opção --</option>
@foreach ($enum_turno as $key => $value)
<option @if(old('turno') == $value ) selected @endif value="{{ $value }}">{{ $value }}</option>
@endforeach
</select>
@endcomponent
</div>
@php
$options = array('6' => 6, '7' => 7,'8' => 8,'9' => 9,'10' => 10,'11' => 11,'12' => 12);
@endphp
<div class="col-6">
@component('componentes.select', ['label' => 'Total de períodos do curso'])
<select name="total_periodos[]" class="form-control" onchange="gerarPeriodo(this)" required>
<option value="" disabled selected>-- Selecione uma opção --</option>
@foreach ($options as $key => $value)
<option @if(old('total_periodos') == $key ) selected @endif value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
@endcomponent
</div>
<div class="col-6">
@component('componentes.select', ['label' => 'Período atual'])
<select name="periodo_atual[]" class="form-control" required >
<option value="" disabled selected>-- Selecione uma opção --</option>
</select>
@endcomponent
</div>
<div class="col-6">
@component('componentes.select', ['label' => 'Ordem de prioridade'])
<select name="ordem_prioridade[]" class="form-control" required>
<option value="" disabled selected>-- ORDEM --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Coeficiente de rendimento'])
<input type="number" class="form-control media" name="media_geral_curso[]" min="0" max="10" step="0.01" required>
@endcomponent
</div>
<div class="col-md-12"><h5>Plano de trabalho</h5></div>
<div class="col-6">
@component('componentes.input', ['label' => 'Título'])
<input type="text" class="form-control" name="nomePlanoTrabalho[]" placeholder="Digite o título do plano de trabalho" required>
@endcomponent
</div>
<div class="col-6">
@component('componentes.input', ['label' => 'Anexo(.pdf)'])
<input type="file" class="input-group-text" name="anexoPlanoTrabalho[]" accept=".pdf" placeholder="Anexo do Plano de Trabalho" required/>
@endcomponent
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row" style="display: none">
{{-- <button type="button" onload="myScript(this)" onclick="subir(this)" >Subir</button>
<button type="button" onload="myScript(this)" onclick="descer(this)">Descer</button> --}}
<button type="button" class="btn btn-danger" id="buttonRemover" onclick="removerPart(this)" >Remover participante</button>
<div class="col-md-12">
<a class="btn btn-light" data-toggle="collapse" id="idCollapseParticipante" href="#collapseParticipante" role="button" aria-expanded="false" aria-controls="collapseParticipante" style="width: 100%; text-align:left">
<div class="d-flex justify-content-between align-items-center">
<h4 id="tituloParticipante" style="color: #01487E; font-size:17px; margin-top:5px">Participante<span id="pontos" style="display: none;">:</span> <span style="display: none;" id="display"></span> </h4>
</div>
</a>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<div class="collapse" id="collapseParticipante"> <div class="collapse" id="collapseParticipante">
...@@ -230,14 +64,15 @@ ...@@ -230,14 +64,15 @@
</div> </div>
<div class="col-6"> <div class="col-6">
@component('componentes.input', ['label' => 'CPF']) @component('componentes.input', ['label' => 'CPF'])
<input type="text" class="form-control cpf" name="cpf[]" placeholder="CPF" required/> <input type="text" class="form-control cpf" name="cpf[]" placeholder="CPF" required onchange="checarCPFdoCampo(this)" onkeyup="mascaraCPF(this)"/>
<span id="cpf-invalido-1" class="invalid-feedback cpf-invalido" role="alert" style="overflow: visible; display:none"> <span id="cpf-invalido-1" class="invalid-feedback cpf-invalido" role="alert" style="overflow: visible; display:none">
<strong style="font-style: italic;">CPF inválido</strong> <span style="font-style: italic;">CPF inválido.</span>
</span> </span>
<span id="cpf-valido-1" class="valid-feedback" role="alert" style="overflow: visible; display:none"> <span id="cpf-valido-1" class="valid-feedback" role="alert" style="overflow: visible; display:none">
<strong style="font-style: italic;">CPF válido!</strong> <span style="font-style: italic;">CPF válido.</span>
</span> </span>
@endcomponent @endcomponent
</div> </div>
<div class="col-6"> <div class="col-6">
@component('componentes.input', ['label' => 'RG']) @component('componentes.input', ['label' => 'RG'])
...@@ -550,7 +385,7 @@ ...@@ -550,7 +385,7 @@
}); });
$('.cep').mask('00000000'); $('.cep').mask('00000000');
$('.cpf').mask('000.000.000-00'); // $('.cpf').mask('000.000.000-00');
$('.numero').mask('0000000000000'); $('.numero').mask('0000000000000');
var SPMaskBehavior = function (val) { var SPMaskBehavior = function (val) {
return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009'; return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
...@@ -898,19 +733,34 @@ ...@@ -898,19 +733,34 @@
// }); // });
// }); // });
$(document).ready(function(){ // $(document).ready(function(){
$(".cpf").change(function(){ // $(".cpf").change(function(){
console.log(this.parentElement.children[0]) // console.log(this.parentElement.children[0])
if (validarCPF(retirarFormatacao(this.value))) { // if (validarCPF(retirarFormatacao(this.value))) {
this.parentElement.children[1].style.display = "none"; // this.parentElement.children[1].style.display = "none";
this.parentElement.children[2].style.display = "block"; // this.parentElement.children[2].style.display = "block";
// } else {
// this.parentElement.children[1].style.display = "block";
// this.parentElement.children[2].style.display = "none";
// }
// });
// });
function checarCPFdoCampo(input) {
if (input.value.length == 14) {
if (validarCPF(retirarFormatacao(input.value))) {
input.parentElement.children[1].style.display = "none";
input.parentElement.children[2].style.display = "block";
} else { } else {
this.parentElement.children[1].style.display = "block"; input.parentElement.children[1].style.display = "block";
this.parentElement.children[2].style.display = "none"; input.parentElement.children[2].style.display = "none";
} }
}); } else {
}); input.parentElement.children[1].style.display = "none";
input.parentElement.children[2].style.display = "none";
}
}
function validarCPF(strCPF) { function validarCPF(strCPF) {
var soma; var soma;
...@@ -986,5 +836,28 @@ ...@@ -986,5 +836,28 @@
$("#modalCpfInvalido").modal('show'); $("#modalCpfInvalido").modal('show');
} }
} }
function mascaraCPF(input) {
var numeros = "0123456789.-";
var resultado = "";
if (input.value.length < 14) {
for (var i = 0; i < input.value.length; i++) {
if (numeros.indexOf(input.value[i]) > -1) {
if ((i == 2 || i == 6) && input.value[i+1] != ".") {
resultado += input.value[i] + ".";
} else if (i == 10 && input.value[i+1] != "-") {
resultado += input.value[i] + "-";
} else {
resultado += input.value[i];
}
}
}
} else {
for (var i = 0; i < 14; i++) {
resultado += input.value[i];
}
}
input.value = resultado;
}
</script> </script>
@endsection @endsection
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment