El problema que tengo es que el icono de valido/no valido
aparece encima de los inputs
. ¿Como podría solucionarlo?.
NOTA: quisiera preservar los inputs
de forma lineal.
$( document ).ready(function() {
$('#form-crear')
.on('init.field.fv', function(e, data) {
data.element
.data('fv.icon')
.wrap($('<span/>'))
.parent()
.wrap($('<span/>').addClass('form-control-feedback'));
})
.formValidation({
framework: 'bootstrap',
excluded: ':disabled',
button: {
selector: '#Guardar',
disabled: 'disabled'
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-exclamation-sign',
validating: 'glyphicon glyphicon-refresh'
},
err: {
container: '#error_formvalidation'
},
fields: {
'crear_criticidad[]': {
validators: {
notEmpty: {
message: 'Campo requerido'
},
}
},
'crear_uso[]': {
validators: {
notEmpty: {
message: 'Campo requerido'
},
}
},
'crear_comp[]': {
validators: {
notEmpty: {
message: 'Campo requerido'
},
}
},
}
})
.on('err.field.fv', function(e, data) {
var $field = data.element,
$icon = $field.data('fv.icon'),
$messages = $field.data('fv.messages').find('.help-block[data-fv-for="' + data.field + '"]');
// Get a random message
var message = $messages.filter('[data-fv-result="INVALID"]').eq(0).html();
var htmlattri="background-color:red;";
$icon.removeClass()
.addClass('glyphicon glyphicon-remove')
.parent()
.addClass('hint--bottom hint--error')
.attr('data-hint', message);
// Hide all error messages
$messages.hide();
})
.on('success.field.fv', function(e, data) {
data.element
.data('fv.icon')
.removeClass()
.addClass('glyphicon glyphicon-ok')
.parent()
.removeClass('hint--bottom hint--error')
.removeAttr('data-hint');
});
});
$(document).on('click', '#Guardar', function() {
var bool = $('#form-crear').data('formValidation').validate().isValid();
});
$(document).on('click', '#Crear', function() {
$('#ModalCrear').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/js/formValidation.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/css/formValidation.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<span id="error_formvalidation" class="hidden"></span>
<div id="ModalCrear" class="modal fade" role="dialog" style="overflow-y: scroll;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-tittle">Crear</h4>
</div>
<form class="form-horizontal" role="form" id="form-crear">
<div class="panel-body">
<div class="form-group">
<label for="crear_criticidad[]" class="control-label col-xs-3 col-sm-3 col-lg-3 col-md-3">Criticidad:</label>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_criticidad[]" value="A"> A</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_criticidad[]" value="B"> B</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_criticidad[]" value="C"> C</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_criticidad[]" value="D"> D</label>
</div>
</div>
<div class="form-group">
<label for="crear_uso[]" class="control-label col-xs-3 col-sm-3 col-lg-3 col-md-3">Uso:</label>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_uso[]" value="A"> A</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_uso[]" value="B"> B</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_uso[]" value="C"> C</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_uso[]" value="D"> D</label>
</div>
</div>
<div class="form-group">
<label for="crear_comp[]" class="control-label col-xs-3 col-sm-3 col-lg-3 col-md-3">Componentes:</label>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_comp[]" value="A"> A</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_comp[]" value="B"> B</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_comp[]" value="C"> C</label>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
<label><input type="radio" name="crear_comp[]" value="D"> D</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="fa fa-remove"></span> Cerrar
</button>
<button type="button" id="Guardar" name="Guardar" class="btn btn-primary">
<span class="fa fa-save"></span> Guardar
</button>
</div>
</form>
</div>
</div>
</div>
<button type="button" id="Crear" class="btn btn-primary botonCrear"><span class="fa fa-plus"></span><span class="hidden-xs"> Agregar</span></button>
PD: para los que les guste mas usar jsfiddler.