0

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.

4
  • Donde quieres que salgan? a la derecha, izq?
    – lois6b
    Commented el 4 may. 2017 a las 8:02
  • @lois6b a la derecha, como acá en formvalidation.io.
    – bypabloc_
    Commented el 4 may. 2017 a las 8:04
  • @lois6b y a la izquierda? xD
    – bypabloc_
    Commented el 7 may. 2017 a las 4:13
  • Ni idea, man, sorry ^^'
    – lois6b
    Commented el 8 may. 2017 a las 5:59

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.