不能正常工作验证引导jalali日期拾取器

Question

我的表单工作与验证引导日期拾取器。但不能正常工作验证Bootstrap jalali日期拾取器(波斯语)。当填写字段后再提交，验证工作正常。但是当字段空白然后填充字段时，给出错误"开始日期是必需的"或"完成日期是必需的"。字段已填满，错误仍然存在。如何解决这个问题?

<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日期拾取器，并且没有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');
    }
});