Don’t work properly validation bootstrap jalali datepicker

Question

my form work with validation bootstrap datepicker . But doesn’t work properly validation Bootstrap jalali datepicker (persian language). When fill fields then submit, validation working properly. But when field blanked then filled field, give error “The start date is required” or “The finish date is required”. Field filled, error remains. How do I solve this problem?

<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');
        }
    });

See form in CodePen

Try to import only one version of Bootstrap-datepicker (try the latest one v1.4.1), because using 2 version or more will make a conflict. — Arkni
I import only one version of Bootstrap- Datepicker. but the problem not resolve. I have removed (css, js) bootstrap-datepicker V1.3.0 . but the problem not resolve. edited CodePen — Elham AM
I thought you're using Bootstrap-datepicker created by Eternicode. But the datepicker you're using is not maintained anymore (last update May 4, 2014) — Arkni

Arkni Arkni · Accepted Answer · 2015-10-03T21:52:32

The datepicker you're using is based on JQuery-UI datepicker, and doesn't have the changeDate event.

You have to use the onSelect option, instead, in order to revalidate your field.

See below code:

// 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');
    }
});

Don’t work properly validation bootstrap jalali datepicker

1 Answers