1

Tome este ejemplo y alli funciona perfecto, pero en mi sistema no.

Aca el Form mio:

                    <div id="ModalCrear" class="modal fade" role="dialog"> 
                    <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="modal-body">
                                            <div class="form-group">
                                                <label for="CrearNombre" class="control-label col-sm-2">Nombre: </label>
                                                <div class="col-sm-10">
                                                    <input type="name" class="form-control" id="CrearNombre" name="CrearNombre">
                                                </div>
                                            </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            <span class="glyphicon glyphicon-remove"></span> Cerrar 
                                        </button>
                                        <button type="submit" id="Guardar" class="btn btn-primary">
                                            <span class="fa fa-save"> Guardar</span>
                                        </button>
                                    </div>
                                </form>
                        </div>
                    </div>
                </div>

Aca mi jQuery:

    $(document).ready(function(){
    jQuery.validator.setDefaults({
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
                $(element).closest('.form-group').find('i.fa').remove();
                $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
                $(element).closest('.form-group').find('i.fa').remove();
                $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
            }
        }
    });
    $( "#form-crear" ).validate({
        rules: {
            CrearNombre: {
                required: true
            }
        }
    });
});

y mi resultado es:

jquery validation plugin

0

1 respuesta 1

1

El problema es que haz envuelto el input con un extra <div>:

<div class="col-sm-10">
  <input type="name" class="form-control" id="CrearNombre" name="CrearNombre">
</div>

Entonces esta linea:

$(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');

Hace que te lo mete después del extra <div> y te lo desconfigura.

Solución:

Metes una clase llamado extraDiv por ejemplo:

<div class="col-sm-10 extraDiv">
  <input type="name" class="form-control" id="CrearNombre" name="CrearNombre">
</div>

y cambias la clase en validator:

$(element).closest('.extraDiv').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');

Ver Demo

8
  • ¿y como hago para q el texto que esta abajo, el mensaje del error (ej: "This field is required."), se coloque en rojo tambien?
    – bypabloc_
    el 26 nov. 2016 a las 20:04
  • 1
    @PabloContreras - pon en tu css .error { color: red; } el 26 nov. 2016 a las 20:33
  • no me funciono con ".error" probe con ".has-error" y si funciono.
    – bypabloc_
    el 26 nov. 2016 a las 20:54
  • 1
    @PabloContreras - A mi si me funciono: ver el 26 nov. 2016 a las 20:56
  • 1
    @PabloContreras - No te puedo decir ahora más en la demo funciona y es eso vamos... pero no se lo que te puede fallar ahora... Lo que puedes probar es quitar el div extra dejar el validator como estaba y pruebas: como aqui y luego te queda a ajustar el estilo el 26 nov. 2016 a las 21:05

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.