Question

我有一个包含日期选择器的表单，我需要将其作为用户的必填字段。我对表单进行了验证，但是，我仍然说每次单击“提交”按钮时都需要填写日期。我错过了什么吗？

这是我的代码：

HTML：

<form class="form-horizontal" id="contactForm" action="PostFoundItem" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <label for="dateFound" class="col-sm-3 control-label">Date Found:</label>
        <div class="col-sm-9">
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-calendar">
                    </i>
                </div>
                <input class="form-control hasDatepicker"  id="fi"  name="dateFound" placeholder="YYYY/MM/DD" type="text"/>
            </div>
        </div>
    </div>
</form>

JS：

<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

<script>
    $(document).ready(function () {
    var date_input = $('input[name="dateFound"]'); //our date input has the name "date"
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
    var FromEndDate = new Date();
    date_input.datepicker({
        format: 'yyyy/mm/dd',
        container: container,
        endDate: '+0d',
        todayHighlight: true,
        autoclose: true,
        required: true,

    })
})
    $(document).ready(function () {
        $('#contactForm').bootstrapValidator({
            container: '#message',
            fields: {
                dateFound: {
                    validators: {
                        notEmpty: {
                            message: 'The `Date Found` field is required and cannot be empty'
                        }

                    }
                }
            }
        });
    });
</script>

Answer 1

您缺少jQuery和Bootstrap javascript，请在您的代码中添加此内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

如何验证我的datepicker文本框？

1 个答案: