Tenho uma função jQuery, que oculta ou exibe alguns campos de acordo com o radio
selecionado. Porém eu preciso que seja ocultado todos os campos se o radio
não estiver com nenhum valor marcado.
O código funciona, mas no Opencart os campos CPF, RG, CNPJ, Razão Social e IE não ficam ocultados em estado inicial.
Tentei setar o primeiro radio
, mas mesmo assim a função só funciona quando marca outro radio
.
Página do código no Opencart
Segue o código funcionando:
Note que o Opencart
adiciona automaticamente nas div
o código style="display: block;"
talvez mudar este código para style="display: none;"
através de jQuery
poderia resolver, mas eu não consegui.
$(function() {
$('#custom-field2, #custom-field3, #custom-field4, #custom-field5, #custom-field6').hide();
// definir variavel global com o radiogroup
var $radio = $('input:radio[name^="custom_field[account][1]"]');
$radio.on("change", function() {
var chosen = this.checked && this.value == '1';
$("#custom-field2, #custom-field3").toggle(chosen).find('input').attr('disabled', !chosen);
$("#custom-field4, #custom-field5, #custom-field6").toggle(!chosen).find('input').attr('disabled', chosen);
});
$('[id^="input-custom-field"]:disabled').closest('.form-group.custom-field').hide();
$("#input-custom-field3").addClass('cpf_cnpj');
$("#input-custom-field5").addClass('cpf_cnpj');
$("#input-email").focusin(function() {
if (!$radio.is(':checked')) {
alert("Escolha o tipo de pessoa");
$radio.focus();
}
// checar se o radio selecionado é o CPF e aplicar a devida validação
if ($radio.filter(':checked').val() == '1') {
$('#custom-fiel4, #custom-field5, #custom-field6').show();
if (($('#input-custom-field2').val().length < 3) && ($('#input-custom-field3').val().length < 3)) {
$('label[for="label-custom-field2"], label[for="label-custom-field3"]').addClass('c-obrigatorio text-danger');
$("#input-custom-field2, #input-custom-field3").addClass('input-erro');
$('label[for="label-custom-field4"], label[for="label-custom-field5"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
$('#input-custom-field3').focus();
} else if ($('#input-custom-field3').val().length < 3) {
$('label[for="label-custom-field3"]').addClass('c-obrigatorio text-danger');
$("#input-custom-field3").addClass('input-erro');
$('label[for="label-custom-field2"], label[for="label-custom-field4"], label[for="label-custom-field5"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
$('#input-custom-field3').focus();
} else if ($('#input-custom-field2').val().length < 3) {
$('label[for="label-custom-field2"]').addClass('c-obrigatorio text-danger');
$("#input-custom-field2").addClass('input-erro');
$('label[for="label-custom-field3"], label[for="label-custom-field4"], label[for="label-custom-field5"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
$('#input-custom-field2').focus();
}
}
// checar se o radio selecionado é o CNPJ e aplicar a devida validação
if ($radio.filter(':checked').val() == '2') {
if (($('#input-custom-field4').val().length < 3) && ($('#input-custom-field5').val().length < 3)) {
$('label[for="label-custom-field4"], label[for="label-custom-field5"]').addClass('c-obrigatorio text-danger');
$("#input-custom-field4, #input-custom-field5").addClass('input-erro');
$('#input-custom-field4').focus();
} else if ($('#input-custom-field4').val().length < 3) {
$('label[for="label-custom-field4"]').addClass('c-obrigatorio text-danger');
$("#input-custom-field2").addClass('input-erro');
$('label[for="label-custom-field2"], label[for="label-custom-field3"], label[for="label-custom-field5"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
$('#input-custom-field4').focus();
} else if ($('#input-custom-field5').val().length < 3) {
$('label[for="label-custom-field5"]').addClass('c-obrigatorio text-danger');
$("#input-custom-field5").addClass('input-erro');
$('label[for="label-custom-field2"], label[for="label-custom-field3"], label[for="label-custom-field4"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
$('#input-custom-field5').focus();
}
}
});
});
function vCPF(cpf) {
cpf = cpf.replace(/[^\d]+/g,'');
if(cpf == '' || cpf.length != 11) return false;
var resto;
var soma = 0;
if (cpf == "00000000000" || cpf == "11111111111" || cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf == "99999999999" || cpf == "12345678909") return false;
for (i=1; i<=9; i++) soma = soma + parseInt(cpf.substring(i-1, i)) * (11 - i);
resto = (soma * 10) % 11;
if ((resto == 10) || (resto == 11)) resto = 0;
if (resto != parseInt(cpf.substring(9, 10)) ) return false;
soma = 0;
for (i = 1; i <= 10; i++) soma = soma + parseInt(cpf.substring(i-1, i)) * (12 - i);
resto = (soma * 10) % 11;
if ((resto == 10) || (resto == 11)) resto = 0;
if (resto != parseInt(cpf.substring(10, 11) ) ) return false;
return true;
}
function vCNPJ(cnpj) {
cnpj = cnpj.replace(/[^\d]+/g,'');
if(cnpj == '' || cnpj.length != 14) return false;
if (cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999") return false;
var tamanho = cnpj.length - 2
var numeros = cnpj.substring(0,tamanho);
var digitos = cnpj.substring(tamanho);
var soma = 0;
var pos = tamanho - 7;
for (i = tamanho; i >= 1; i--) {
soma += numeros.charAt(tamanho - i) * pos--;
if (pos < 2)
pos = 9;
}
var resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
if (resultado != digitos.charAt(0)) return false;
tamanho = tamanho + 1;
numeros = cnpj.substring(0,tamanho);
soma = 0;
pos = tamanho - 7;
for (i = tamanho; i >= 1; i--) {
soma += numeros.charAt(tamanho - i) * pos--;
if (pos < 2) pos = 9;
}
resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
if (resultado != digitos.charAt(1)) return false;
return true;
}
$("input[placeholder]").each( function () {
if ($(this).attr("placeholder").indexOf("CPF")>=0) {
var cId = $(this).attr("id");
$(this).mask('000.000.000-00', {
onComplete: function(val, e, field, options) {
if (!vCPF(val)) {
alert("Digite um CPF válido!");
$("#"+cId).val("");
}
},
placeholder: "___.___.___-__"
});
}
if ($(this).attr("placeholder").indexOf("CNPJ")>=0) {
var cnId = $(this).attr("id");
$(this).mask('00.000.000/0000-00', {
onComplete: function(val, e, field, options) {
if (!vCNPJ(val)) {
alert("Digite um CNPJ válido!");
$("#"+cnId).val("");
}
},
placeholder: "__.___.___/____-__"
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="custom-field1" class="form-group custom-field required" data-sort="3" style="display: block;">
<label class="col-sm-2 control-label">Tipo de Pessoa</label>
<div class="col-sm-10">
<div>
<div class="radio">
<label>
<input type="radio" name="custom_field[account][1]" value="1">
Pessoa Física
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="custom_field[account][1]" value="2">
Pessoa Jurídica</label>
</div>
</div>
</div>
</div>
<div id="custom-field4" class="form-group custom-field" data-sort="4" style="display: block;">
<label class="col-sm-2 control-label" for="input-custom-field4">Razão Social</label>
<div class="col-sm-10">
<input type="text" name="custom_field[account][4]" value="" placeholder=" Razão Social" id="input-custom-field4" class="form-control">
</div>
</div>
<div id="custom-field5" class="form-group custom-field" data-sort="5" style="display: block;">
<label class="col-sm-2 control-label" for="input-custom-field5">CNPJ</label>
<div class="col-sm-10">
<input type="text" name="custom_field[account][5]" value="" placeholder="__.___.___/____-__" id="input-custom-field5" class="form-control cpf_cnpj">
</div>
</div>
<div id="custom-field6" class="form-group custom-field" data-sort="6" style="display: block;">
<label class="col-sm-2 control-label" for="input-custom-field6">I.E</label>
<div class="col-sm-10">
<input type="text" name="custom_field[account][6]" value="" placeholder="I.E" id="input-custom-field6" class="form-control">
</div>
</div>
<div id="custom-field3" class="form-group custom-field" data-sort="5" style="display: block;">
<label class="col-sm-2 control-label" for="input-custom-field3">CPF</label>
<div class="col-sm-10">
<input type="text" name="custom_field[account][3]" value="" placeholder="___.___.___-__" id="input-custom-field3" class="form-control cpf_cnpj">
</div>
</div>
<div id="custom-field2" class="form-group custom-field" data-sort="4" style="display: block;">
<label class="col-sm-2 control-label" for="input-custom-field2">RG</label>
<div class="col-sm-10">
<input type="text" name="custom_field[account][2]" value="" placeholder="RG" id="input-custom-field2" class="form-control">
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-email">E-mail</label>
<div class="col-sm-10">
<input type="email" name="email" value="" placeholder="E-mail" id="input-email" class="form-control">
</div>
</div>
<input type="submit" value="Continuar" class="btn btn-primary">