javascript - 验证 bootstrap jalali datepicker 无法正常工作

Question

我的表单与验证引导日期选择器一起使用。但无法正常验证 Bootstrap jalali datepicker(波斯语)。当填写字段然后提交时，验证工作正常。但是，当字段为空然后填充字段时，会出现错误“需要开始日期”或“需要结束日期”。字段已填，但错误仍然存​​在。我该如何解决这个问题？

<form class="form-horizontal" action="" method="post" name="delete_table" id="delete_table" role="form" enctype="multipart/form-data">

<div class="panel-body">
    <div class="form-group">
        <label class="col-md-2 control-label" for="family">show date</label>
            <div class="form-group col-md-4">
                <div class="input-group input-append date">
                    <input type="text" class="form-control datepicker" name="start_date" id="start_date" placeholder="start"/>
                        <span class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></span>
                </div>
            </div>  
            <div class="input-group input-append date col-md-4">
                <input type="text" class="form-control datepicker" name="finish_date" id="finish_date" placeholder="end"/>
            </div>
        </div>
    </div>
<div class="panel-footer">
    <button type="submit" id="submit_page" class="btn btn-success">save</button>
</div>
</form>

JavaScript

    $("#start_date").datepicker({
        changeMonth: true,
        changeYear: true,
        isRTL: true,
        dateFormat: "mm/dd/yy"
    })
    .on('changeDate', function(e) {
        // Revalidate the start date field
        $('#delete_table').formValidation('revalidateField', 'start_date');
    });
    $("#finish_date").datepicker({
        changeMonth: true,
        changeYear: true,
        isRTL: true,
        dateFormat: "mm/dd/yy"
    })
    .on('changeDate', function(e) {
        // Revalidate the start date field
        $('#delete_table').formValidation('revalidateField', 'finish_date');
    });

$('#delete_table').formValidation({
        framework: 'bootstrap',
        icon: {
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            start_date: {
                validators: {
                    notEmpty: {
                        message: 'The start date is required'
                    },
                    date: {

                    }
                }
            },
            finish_date: {
                validators: {
                    notEmpty: {
                        message: 'The finish date is required'
                    },
                    date: {

                    }
                }
            }
        }
    })
    .on('success.field.fv', function(e, data) {
        if (data.field === 'start_date' && !data.fv.isValidField('finish_date')) {
            // We need to revalidate the end date
            data.fv.revalidateField('finish_date');
        }

        if (data.field === 'finish_date' && !data.fv.isValidField('start_date')) {
            // We need to revalidate the start date
            data.fv.revalidateField('start_date');
        }
    });

参见 CodePen 中的表格

Answer 1

您使用的日期选择器基于 JQuery-UI datepicker ，并且没有 changeDate 事件。

您必须使用onSelect相反，选项，以便重新验证您的字段。

参见下面的代码:

// start_date
$("#start_date").datepicker({
    changeMonth: true,
    changeYear: true,
    isRTL: true,
    dateFormat: "mm/dd/yy",
    // Called when a date is selected.
    // See http://api.jqueryui.com/datepicker/#option-onSelect
    onSelect: function(date, inst) {
        // Revalidate the start date field
        $('#delete_table').formValidation('revalidateField', 'start_date');
    }
});

// finish_date
$("#finish_date").datepicker({
    changeMonth: true,
    changeYear: true,
    isRTL: true,
    dateFormat: "mm/dd/yy",
    // Called when a date is selected.
    // See http://api.jqueryui.com/datepicker/#option-onSelect
    onSelect: function(date, inst) {
        // Revalidate the start date field
        $('#delete_table').formValidation('revalidateField', 'finish_date');
    }
});