0
I have a jQuery function, which hides or displays some fields according to the radio selected. But I need to hide all fields if the radio is not marked with any value.
The code works, but in Opencart the fields CPF, RG, CNPJ, Social Reason and IE are not hidden in initial state.
I tried to set the first radio, but even so the function only works when it marks another radio.
Code page in Opencart
Follow the code working:
Note that the Opencart automatically adds to div the code style="display: block;" maybe change 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>
<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">
The community exists to be useful to everyone, not just you, if the link is lost, the code will no longer be accessible. Bring your code to your question instead of using an external fiddle, please.
– Kenny Rafael
Recommend to read the full topic, but in your case it would be Links to the full code
– Guilherme Lautert