I have a jQuery function, which hides or displays some fields according to the radio selected. But I need to hide all fields if radio is not marked.
The code works, but in Opencart the fields CPF, RG, CNPJ, Social Reason and IE are not hidden in the initial state.
I tried to set the first radio , but still the function only works when you mark another radio .
Code page in Opencart
Follow the code working:
Note that Opencart automatically adds in div code style="display: block;" maybe changing this code to style="display: none;" through jQuery could solve, but I could not.
$(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><divid="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">