Datepicker glyphicon 验证不起作用

Question

我正在我的表单中尝试日期选择器。我使用了 bootstrap 字形验证来验证它。但是即使我从选择器中选择了日期，它也会显示验证错误必填字段的消息..我该如何解决这个问题..下面是我的脚本..

<script>
  $(document).ready(function() {
      $('#datepicker')
        .datepicker({
            format: 'mm/dd/yyyy',
            startDate: '01/01/2010',
            endDate: '12/30/2020'
        })
        .on('changeDate', function(e) {
            // Revalidate the date field
            $('#myform').formValidation('revalidateField', 'date');
        });

    $('#myform').bootstrapValidator({
        framework: 'bootstrap',
        fields: {
            date: {
                validators: {
                    notEmpty: {
                        message: 'Last date is required'
                    },
                    date: {
                        format: 'MM/DD/YYYY',
                        min: '01/01/2010',
                        max: '12/30/2020',
                        message: 'The date is not a valid'
                    }
                }
            },

        }
    });

});
</script>

还有我的表格：

<form method="post" id="myform" class="form-horizontal">
<div class="form-group">
        <label for="" class="control-label col-xs-2">Date</label>
            <div class="col-md-6">
                <input type="text" class="form-control" name="date" id="datepicker"  placeholder="Date" >
           </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-4 col-xs-10">
         <button class="btn btn-primary btn-lg " type="submit" >Submit</button>
           </div>
        </div>
</form>

Answer 1

日期未验证，因为您正尝试使用 formvalidation UI datepicker $('#myform').formValidation('revalidateField', 'date'); with .on('changeDate', function(e) where otherhand you are using Bootstrapvalidator 插件来验证日期输入字段 $('#myform').bootstrapValidator()

您正在尝试同时使用 2 个不同的验证插件的简单单词。

此时，不确定您要使用哪个插件来验证日期字段，post formValidation 和 Bootstrapvalidation

的解决方案

Bootstrapvalidation

的解决方案

JS 脚本将是

$(document).ready(function() {
    $('#myform').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },

        fields: {
            date: {
                validators: {
                    notEmpty: {
                        message: 'Last date is required'
                    },
                    date: {
                        format: 'MM/DD/YYYY',
                        min: '01/01/2010',
                        max: '12/30/2020',
                        message: 'The date is not a valid'
                    }
                }
            },
        }
    });
});

和 datepicker 验证将是

$(document).ready(function() {
    $( "#datepicker" ).datepicker({
        onSelect: function(){
            $('#myform').bootstrapValidator('revalidateField', 'date');
        }
    });
});

当您使用 jQuery Datepicker 时，您不能像您所讨论的方法那样使用 onChange 对其进行验证，您必须使用 OnSelect

对其进行验证

Bootstrap Validator Fiddle

formValidation

的解决方案

JS 会

$(document).ready(function () {
    $('#myform').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            date: {
                validators: {
                    notEmpty: {
                        message: 'Last date is required'
                    },
                    date: {
                        format: 'MM/DD/YYYY',
                        min: '01/01/2010',
                        max: '12/30/2020',
                        message: 'The date is not a valid'
                    }
                }
            }
        }
    }).find('[name="date"]')
        .datepicker({
        onSelect: function (date, inst) {
            // Revalidate the field when choosing it from the datepicker
            $('#myform').formValidation('revalidateField', 'date');
        }
    });
});

当您使用 jQuery Datepicker 时，您不能像您所讨论的方法那样使用 onChange 对其进行验证，您必须使用 OnSelect

对其进行验证

formValidation Fiddle

Datepicker glyphicon 验证不起作用

Datepicker glyphicon validation not working

validation

datepicker

twitter-bootstrap

glyphicons