从 bootstrap formhelpers 验证 bootstrap datepicker

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

根据您的代码，输入元素似乎未处于活动状态，因此我们必须在调用突出显示功能时首先使其处于活动状态。因此我们可以添加一个活动类以使其首先处于活动状态然后应用 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 3

你的更新小提琴：https://jsfiddle.net/2rcr9j5s/4/

绝对没问题，jQuery 验证器正在验证它，只是因为 btn-danger 类，输入框内的文本是白色的。你只需要添加

color: black; 到该输入框，其余代码工作正常。

Answer 4

我从未使用过这个插件，但我确实快速浏览了文档，并且有一种方法可以编写 HTML 和 javascript，以便您可以控制创建自己的输入字段。不过，我会尽量按原样回答您的问题，因此您不会花太多时间移动代码。

要回答您的问题，如果您在浏览器中检查元素，您会看到输入名称为“StartTime”。

所以您真正需要做的就是在提交此表单时获取该输入名称的值并验证它。如果它是一个很好的价值，什么也不做。否则阻止提交。

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

现在变量值具有该输入字段的值。您可以根据需要验证它。确保它不为空，编写一个正则表达式以确保它的格式正确且数字有意义。您拥有可以随心所欲地做任何事情的价值。天空才是极限。

希望对你有所帮助。

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