Question

是否可以使用JQuery Validation来验证Bootstrap Datepicker？由于它没有公开input字段，因此我无法对其进行验证。

$.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，以便您可以控制创建自己的输入字段。但是，我会尽量回答您的问题，因此您不会花太多时间来移动代码。

要回答您的问题，如果您在浏览器中检查元素，您会看到输入名称是＆＃34; StartTime＆＃34;。

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

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

从bootstrap formhelper验证bootstrap datepicker

5 个答案: