Datepicker glyphicon验证不起作用

Question

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

<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'); 和 .on('changeDate', function(e) 验证它，而您正在使用 Bootstrapvalidator 插件验证日期输入字段 $('#myform').bootstrapValidator()

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

此时，不确定您要使用哪个插件来验证日期字段，将使用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