Подтверждение выбора даты начальной загрузки с помощью формы начальной загрузки

Question

Можно ли использовать JQuery Validation для проверки Bootstrap Datepicker? Поскольку это не подвергает input поле, я не могу получить его для проверки.

Пример: 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" );
        }
    });
}); 

---

Обновить:

Учебный класс btn-danger должен быть правильно применен к элементу.

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

Answer 1

Обновили скрипку: 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" );
                    }
                });
            }); 

Установите указатель даты, который требуется.

Было ли это то, что вам нужно?

Answer 2

Я никогда не использовал этот плагин, но я быстро взглянул на документацию, и есть способ, которым вы можете написать HTML и javascript, чтобы иметь возможность создавать свои собственные поля ввода. Однако я постараюсь ответить на ваш вопрос как есть, чтобы вы не тратили много времени на перемещение кода.

Чтобы ответить на ваш вопрос, если вы проверите элемент в своем браузере, вы увидите, что входное имя "StartTime".

Таким образом, все, что вам действительно нужно сделать, это отправить эту форму, получить значение для этого входного имени и проверить его. Если это хорошая ценность, ничего не делайте. иначе помешать отправке.

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

Теперь значение переменной имеет значение для этого поля ввода. Вы можете подтвердить это, как вы хотите. Убедитесь, что он не пустой, напишите регулярное выражение, чтобы убедиться, что это хороший формат и числа имеют смысл. У вас есть ценность, вы можете делать с ней все, что захотите. Небо это предел.

Я надеюсь, что это помогло.

Answer 3

Ваша обновленная скрипка: https://jsfiddle.net/2rcr9j5s/4/

Это абсолютно нормально, и валидатор jQuery проверяет его только из-за класса btn-danger, текст внутри поля ввода белый. вам просто нужно добавить

color: black; к этому полю ввода и остальной код работает нормально.

Answer 4

Согласно вашему коду, кажется, что элемент input не находится в активном состоянии, поэтому мы должны сначала сделать его активным при вызове функции подсветки. Поэтому мы можем добавить активный класс, чтобы сначала сделать его активным, а затем применитькласс btn-danger. Так что ваш код должен быть похож

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

Обновленная скрипка: https://jsfiddle.net/anulesh91/2rcr9j5s/10/

Answer 5

Вы не можете использовать JavaScript для проверки. Используйте jquery. попробуй это.

$.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" );
                        }
                    });
                });