0

私のフォームは、検証ブートストラップ datepicker で動作します。しかし、検証が適切に機能しません 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でフォームを参照

4

1 に答える 1

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');
    }
});
于 2015-10-03T21:52:32.713 に答える