twitter-bootstrap - popover bootstrap 4

Bootstrap 3 con el complemento de validación jQuery

Question

Estoy intentando agregar validación a mi formulario con el complemento de validación jQuery, pero tengo un problema donde el complemento pone los mensajes de error cuando estoy usando grupos de entrada.

$(''form'').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest(''.form-group'').addClass(''has-error'');
    },
    unhighlight: function(element) {
        $(element).closest(''.form-group'').removeClass(''has-error'');
    }
});

Mi código: http://jsfiddle.net/hTPY7/4/

Answer 1

Añadiendo a la respuesta anterior de Miguel Borges, puede darle al usuario la retroalimentación de éxito verde agregando la siguiente línea en el bloque de código de resaltado / destello.

    highlight: function(element) {
        $(element).closest(''.form-group'').removeClass(''has-success'').addClass(''has-error'');
    },
    unhighlight: function(element) {
        $(element).closest(''.form-group'').removeClass(''has-error'').addClass(''has-success'');
    }

Answer 2

Esto es lo que uso al agregar la validación al formulario:

// Adding validation to form.
        $(form).validate({
            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                server: {
                    ipAddress: true,
                    required: true
                }   
            },
            highlight: function(element) {
                $(element).closest(''.form-group'').removeClass(''has-success'').addClass(''has-error'');
            },
            success: function(element) {
                $(element).closest(''.form-group'').removeClass(''has-error'').addClass(''has-success'');
            },
            errorClass: ''help-block''
        });

Esto funcionó para mí para el estilo de Bootstrap 3 cuando usé la biblioteca de validación de jquery.

Answer 3

Esto hace que los campos

 $("#form_questionario").validate({
                debug: false,
                errorElement: "span",
                errorClass: "help-block",
                highlight: function (element, errorClass, validClass) {
                    $(element).closest(''.form-group'').addClass(''has-error'');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest(''.form-group'').removeClass(''has-error'');
                },
                errorPlacement: function (error, element) {
                    if (element.parent(''.input-group'').length || element.prop(''type'') === ''checkbox'' || element.prop(''type'') === ''radio'') {
                        error.insertBefore(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                // Specify the validation rules
                rules: {
                        ''campo1[]'': ''required'',
                        ''campo2[]'': ''required'',
                        ''campo3[]'': ''required'',
                        ''campo4[]'': ''required'',
                        ''campo5[]'': ''required''
                        },

                submitHandler: function (form) {
                    form.submit();
                }
            });

Answer 4

La respuesta de DARK_DIESEL funcionó muy bien para mí; aquí está el código para cualquiera que quiera el equivalente usando glyphicons:

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(''span.glyphicon'').remove();
            $(element).closest(''.form-group'').append(''<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>'');
        }
    },
    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(''span.glyphicon'').remove();
            $(element).closest(''.form-group'').append(''<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>'');
        }
    }
});

Answer 5

Lo usé para la radio:

    if (element.prop("type") === "checkbox" || element.prop("type") === "radio") {
        error.appendTo(element.parent().parent());
    }
    else if (element.parent(".input-group").length) {
        error.insertAfter(element.parent());
    }
    else {
        error.insertAfter(element);
    }

de esta forma, el error se muestra en la última opción de radio.

Answer 6

Otra opción es ubicar un contenedor de errores fuera de su grupo de formularios antes de tiempo. El validador lo usará si es necesario.

<div class="form-group">
  <label class="control-label" for="new-task-due-date">When is the task due?</label>
  <div class="input-group date datepicker">
    <input type="text" id="new-task-due-date" class="required form-control date" name="dueDate" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>                          
  </div>
  <label for="new-task-due-date" class="has-error control-label" style="display: none;"></label>
</div>

Answer 7

Para el bootstrap 4 beta hubo algunos grandes cambios entre las versiones alfa y beta de bootstrap (y también bootstrap 3), esp. en lo que respecta a la validación de formularios.

Primero, para colocar los íconos correctamente, necesitarás agregar un estilo que se corresponda con lo que estaba en el arranque 3 y ya no en el arranque beta beta ... esto es lo que estoy usando

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

Las clases también han cambiado ya que la versión beta usa el "estado" del control en lugar de las clases que el código publicado no refleja, por lo que su código anterior puede no funcionar. De todos modos, deberás agregar la clase ''was-validated'' al formulario ya sea en las devoluciones de llamada de éxito o de resaltado / desmarcado

$(element).closest(''form'').addClass(''was-validated'');

También recomendaría usar el nuevo elemento y las clases para el texto de ayuda de control de formulario

errorElement: ''small'',
errorClass: ''form-text invalid-feedback'',

Answer 8

Para una compatibilidad total con Bootstrap 3, agregué soporte para input-group , radio y checkbox , que faltaba en las otras soluciones.

Actualización 20/10/2017 : sugerencias inspeccionadas de las otras respuestas y soporte adicional agregado para marcado especial de radio en línea , mejor colocación de errores para un grupo de radios o casillas de verificación y soporte adicional para una clase personalizada de no validación para evitar la validación de controles. Espero que esto ayude y gracias por las sugerencias.

Después de incluir el complemento de validación, agregue la siguiente llamada:

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass(''novalidation'')) {
            $(element).closest(''.form-group'').removeClass(''has-success'').addClass(''has-error'');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass(''novalidation'')) {
            $(element).closest(''.form-group'').removeClass(''has-error'').addClass(''has-success'');
        }
    },
    errorPlacement: function (error, element) {
        if (element.parent(''.input-group'').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop(''type'') === ''radio'' && element.parent(''.radio-inline'').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop(''type'') === ''checkbox'' || element.prop(''type'') === ''radio'') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

Esto funciona para todas las clases de formulario de Bootstrap 3. Si usa una forma horizontal, debe usar la siguiente marca. Esto garantiza que el texto del bloque de ayuda respete los estados de validación ("has-error", ...) del formulario-grupo .

<div class="form-group">
    <div class="col-lg-12">
        <div class="checkbox">
            <label id="LabelConfirm" for="CheckBoxConfirm">
                <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
                I have read all the information 
            </label>
        </div>
    </div>
</div>

Answer 9

Sé que esta pregunta es para Bootstrap 3, pero como algunas preguntas relacionadas con Bootstrap 4 se redireccionan a esta como duplicados, aquí está el fragmento compatible con Bootstrap 4:

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest(''.form-group'').addClass(''has-danger'');
    },
    unhighlight: function(element) {
        $(element).closest(''.form-group'').removeClass(''has-danger'');
    },
    errorElement: ''small'',
    errorClass: ''form-control-feedback d-block'',
    errorPlacement: function(error, element) {
        if(element.parent(''.input-group'').length) {
            error.insertAfter(element.parent());
        } else if(element.prop(''type'') === ''checkbox'') {
            error.appendTo(element.parent().parent().parent());
        } else if(element.prop(''type'') === ''radio'') {
            error.appendTo(element.parent().parent().parent());
        } else {
            error.insertAfter(element);
        }
    },
});

Las pocas diferencias son:

• El uso de clase has-danger lugar de has-error
• Mejor error de posicionamiento de radios y casillas de verificación

Answer 10

Utilizo formularios diseñados solo con Twitter Bootstrap 3. Configuré las funciones predeterminadas para validor y solo corroboro el método con reglas. Uso Icons from FontAweSome, pero puedes usar Glyphicons como en el ejemplo de doc.

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>'');
        }
    }
});

Hecho. Después de ejecutar la función de validación:

$("#default-register-user").validate({
    rules: {
        ''login'': {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        ''email'': {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 100
        },
        ''password'': {
            required: true,
            minlength: 6,
            maxlength: 25
        },
        ''confirmpassword'': {
            required: true,
            minlength: 5,
            maxlength: 25,
            equalTo: "#password"
        }
    }
});

Ejemplo JSFiddle

Answer 11

agregue la corrección de radio en línea a este https://.com/a/18754780/966181

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest(''.form-group'').addClass(''has-error'');
    },
    unhighlight: function(element) {
        $(element).closest(''.form-group'').removeClass(''has-error'');
    },
    errorElement: ''span'',
    errorClass: ''help-block'',
    errorPlacement: function(error, element) {
        if(element.parent(''.input-group'').length) {
            error.insertAfter(element.parent());
        } else if (element.parent(''.radio-inline'').length) {
            error.insertAfter(element.parent().parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Answer 12

esta es la solución que necesita, puede usar el método errorPlacement para anular dónde colocar el mensaje de error

$(''form'').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    errorPlacement: function(error, element) {
        error.insertAfter(''.form-group''); //So i putted it after the .form-group so it will not include to your append/prepend group.
    }, 
    highlight: function(element) {
        $(element).closest(''.form-group'').addClass(''has-error'');
    },
    unhighlight: function(element) {
        $(element).closest(''.form-group'').removeClass(''has-error'');
    }
});

me funciona como la magia. Aclamaciones

Answer 13

para una compatibilidad total con twitter bootstrap 3, necesito anular algunos métodos de complementos:

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest(''.form-group'').addClass(''has-error'');
    },
    unhighlight: function(element) {
        $(element).closest(''.form-group'').removeClass(''has-error'');
    },
    errorElement: ''span'',
    errorClass: ''help-block'',
    errorPlacement: function(error, element) {
        if(element.parent(''.input-group'').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Ver Ejemplo: http://jsfiddle.net/mapb_1990/hTPY7/7/