Question

我正在尝试我的表单中的日期选择器..我使用了bootstrap 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日期选择工具$('#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

Datepicker glyphicon验证无效

1 个答案: