jquery - rango - Validación del selector de fechas de arranque desde los ayudantes de formularios de arranque

insertar calendario en formulario html

Question

¿Es posible usar la validación de JQuery para validar el selector de fechas de Bootstrap? Como no expone el campo de input , no puedo hacer que se valide.

Ejemplo: https://jsfiddle.net/Khrys/2rcr9j5s/

$.validator.setDefaults({
   submitHandler: function() {
      form.submit()
   }
});


$().ready(function() {
var container = $(''div.containerx'');

    $("#Form").validate({
        ignore: [],
        messages: {
            StartTime: {
                required: "Select the StartTime."
            }
        },
        errorContainer: container,
        errorLabelContainer: $("span", container),

        highlight: function ( element, errorClass, validClass ) {
            $(''#StartTime'').addClass( "btn-danger" );
            $(''#Filter'').addClass( "btn-danger" );
        },
        unhighlight: function ( element, errorClass, validClass ) {
            $(''#StartTime'').removeClass( "btn-danger" );
            $(''#Filter'').removeClass( "btn-danger" );
        }
    });
}); 

Actualizar:

La clase btn-danger debe aplicarse correctamente al elemento.

https://jsfiddle.net/2rcr9j5s/4/

Answer 1

Haber actualizado el violín: https://jsfiddle.net/2rcr9j5s/1/

                $.validator.setDefaults({
                submitHandler: function() {
                    form.submit()
                }
            });

            $().ready(function() {

                var container = $(''div.containerx'');

                $("#Form").validate({
                    ignore: [],
                    rules:{
                       StartTime: {
                            required: true
                        }
                    },
                    messages: {
                        StartTime: {
                            required: "Select the StartTime."
                        }
                    },
                    errorContainer: container,
                    errorLabelContainer: $("span", container),

                    highlight: function ( element, errorClass, validClass ) {
                        $(''#StartTime'').addClass( "btn-danger" );
                        $(''#Filter'').addClass( "btn-danger" );
                    },
                    unhighlight: function ( element, errorClass, validClass ) {
                        $(''#StartTime'').removeClass( "btn-danger" );
                        $(''#Filter'').removeClass( "btn-danger" );
                    }
                });
            }); 

Establezca el selector de fecha que se requiere.

¿Era esto lo que necesitabas?

Answer 2

No puedes usar javascript para validar. Usa jquery. prueba esto.

$.validator.setDefaults({
                    submitHandler: function() {
//////////////////////////// you can write your validation/////////////////////////////          

          var x = $("[name=StartTime]").val();
          alert(x);
///////////////////////////////////////////////////////////////////////////////////////          
                        form.submit();
                    }
                });

                $().ready(function() {

                    var container = $(''div.containerx'');

                    $("#Form").validate({
                        ignore: [],
                        messages: {
                            StartTime: {
                                required: "Select the StartTime."
                            }
                        },
                        errorContainer: container,
                        errorLabelContainer: $("span", container),

                        highlight: function ( element, errorClass, validClass ) {
                            $(''#StartTime'').addClass( "btn-danger" );
                            $(''#Filter'').addClass( "btn-danger" );
                        },
                        unhighlight: function ( element, errorClass, validClass ) {
                            $(''#StartTime'').removeClass( "btn-danger" );
                            $(''#Filter'').removeClass( "btn-danger" );
                        }
                    });
                }); 

Answer 3

Nunca utilicé este complemento, pero sí eché un vistazo rápido a la documentación y hay una forma en que puedes escribir HTML y javascript para que tengas el control de crear tu propio campo de entrada. Sin embargo, solo intentaré responder tu pregunta tal como está, para que no pases mucho tiempo moviendo el código.

Para responder a su pregunta, si inspecciona el elemento en su navegador, verá que el nombre de entrada es "StartTime".

Entonces, todo lo que necesita hacer es enviar este formulario, obtener el valor para ese nombre de entrada y validarlo. Si es un buen valor no hagas nada. de lo contrario evitará el envío.

var value = $("input[name=''StartTime'']").val();

Ahora el valor de la variable tiene el valor para ese campo de entrada. Puedes validarlo como quieras. Asegúrese de que no esté vacío, escriba una expresión regular para asegurarse de que sea un buen formato y que los números tengan sentido. Usted tiene el valor que puede hacer lo que quiera con él. El cielo es el limite.

Espero que haya ayudado.

Answer 4

Según su código, parece que el elemento de entrada no está en estado activo, por lo que primero tenemos que activarlo cuando se llama a la función de resalte. Así que podemos agregar una clase activa para activarlo primero y luego aplicar la clase btn-danger . Entonces tu código debería ser como

highlight: function ( element, errorClass, validClass ) {
          $(element).addClass( "active" );
          $(element).addClass( "btn-danger" );
          $(''#Filter'').addClass( "btn-danger" );
        },
unhighlight: function ( element, errorClass, validClass ) {
          $(element).removeClass( "active" );
          $(element).removeClass( "btn-danger" );
          $(''#Filter'').removeClass( "btn-danger" );
        }

El violín actualizado es: https://jsfiddle.net/anulesh91/2rcr9j5s/10/

Answer 5

Su actualización de violín: https://jsfiddle.net/2rcr9j5s/4/

Está absolutamente bien y el validador jQuery lo está validando solo debido a que la clase de peligro de btn el texto dentro del cuadro de entrada es blanco. solo necesitas agregar

color: black; a ese cuadro de entrada y el resto del código funciona bien.