19

是否可以使用 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/

4

5 回答 5

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

将日期选择器设置为必需。

这是你需要的吗？

于 2015-12-14T12:56:49.310 回答
0

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

于 2016-10-02T00:07:59.283 回答
0

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

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

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

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

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

我希望这有帮助。

于 2017-07-21T22:50:02.340 回答
0

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

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

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

于 2017-02-08T13:56:06.510 回答
-1

您不能使用 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" );
                        }
                    });
                });
于 2016-03-10T06:02:30.127 回答