com radio button e bootstrapValidator
Olá Colegas,Coloco abaixo o código de validação com bootstrapValidator, condicional.
Para isso usei radio button, onde clicando na opção UM tenho de informar apenas o campo UM, e obviamente, na opção DOIS sou obrigado a informar os campos UM e DOIS.
Para isso ocorrer precisei manipular os atributos do campo DOIS.
Bom como o código é curto e autoexplicativo não ha muito o que escrever basta olhar o mesmo abaixo.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BootstrapValidator Opcional</title>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- form: -->
<section>
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h2>Opcional</h2>
<h3>por Álvaro Grisolfi</h3>
</div>
<form id="formulario" method="post" class="form-horizontal" action="target.php">
<div class="form-group">
<label class="col-lg-3 control-label">Escolha</label>
<div class="col-lg-5">
<div class="radio">
<label>
<input type="radio" name="escolha" value="UM" /> Um campo
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="escolha" value="DOIS" checked /> Dois campos
</label>
</div>
</div>
</div>
<div id="div_campoUM">
<div class="form-group">
<label class="col-lg-3 control-label">UM</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="campoUM" />
</div>
</div>
</div>
<div id="div_campoDOIS">
<div class="form-group">
<label id="esconder_label" class="col-lg-3 control-label">DOIS</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="campoDOIS" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Confirmar</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#formulario').bootstrapValidator({
message: 'Este valor não é valido',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
escolha: {
validators: {
notEmpty: {
message: 'Escolha UM ou DOIS'
}
}
} ,
campoDOIS: {
validators: {
notEmpty: {
message: 'O Campo DOIS é obrigatorio'
}
}
} ,
campoUM: {
validators: {
notEmpty: {
message: 'O Campo UM é obrigatorio'
}
}
}
}
});
$('input[name="escolha"]').on('change', function() {
var bootstrapValidator = $('#formulario').data('bootstrapValidator'),
escolha_valor = $(this).val();
if (escolha_valor != "UM"){
// mostra e habilita o campoDois e o label
$('#div_campoDOIS').find('.form-control').attr('disabled', false);
$('#div_campoDOIS').find('.form-control').removeClass('hide');
$('#div_campoDOIS').find('.form-control').removeClass('has-error');
$('#div_campoDOIS').find('.form-control').show();
$("#esconder_label").removeClass('hide');
$("#esconder_label").show();
bootstrapValidator.enableFieldValidators('campoDOIS', true);
$('#formulario').formValidation('validateField', 'campoDOIS');
}
else{
// desabilita e esconde o campoDois e o label
$('#div_campoDOIS').find('.form-control').attr('disabled', true);
$('#div_campoDOIS').find('.form-control').hide();
$('#div_campoDOIS').find('.form-control').toggleClass('hide');
$("#esconder_label").toggleClass('hide');
$("#esconder_label").hide();
// esconde a mensagem e o icone de erro
$( "#div_campoDOIS small").attr('data-bv-result', 'VALID');
$( "#div_campoDOIS small").attr('style', 'display: none;');
$( "#div_campoDOIS i").attr('class', 'form-control-feedback');
bootstrapValidator.enableFieldValidators('campoDOIS', false );
}
});
});
</script>
</body>
</html>
Link download do projeto
Estou em um novo projeto pessoal, desenvolvimento de site/crm para imobiliárias e corretores, caso você tenha interesse em conhecer acesse o exemplo em www.minhacasa.floripa.br
