Проверка глификона Datepicker не работает

Я пытаюсь использовать средство выбора даты в своей форме. Я использовал проверку глификона начальной загрузки для ее проверки. Но даже когда я выбираю дату из средства выбора, отображается сообщение об ошибке проверки для обязательного поля. Как я мог исправить эту проблему..Ниже мой сценарий..

<script>
  $(document).ready(function() {
      $('#datepicker')
        .datepicker({
            format: 'mm/dd/yyyy',
            startDate: '01/01/2010',
            endDate: '12/30/2020'
        })
        .on('changeDate', function(e) {
            // Revalidate the date field
            $('#myform').formValidation('revalidateField', 'date');
        });

    $('#myform').bootstrapValidator({
        framework: 'bootstrap',
        fields: {
            date: {
                validators: {
                    notEmpty: {
                        message: 'Last date is required'
                    },
                    date: {
                        format: 'MM/DD/YYYY',
                        min: '01/01/2010',
                        max: '12/30/2020',
                        message: 'The date is not a valid'
                    }
                }
            },

        }
    });

});
</script>

И моя форма:

<form method="post" id="myform" class="form-horizontal">
<div class="form-group">
        <label for="" class="control-label col-xs-2">Date</label>
            <div class="col-md-6">
                <input type="text" class="form-control" name="date" id="datepicker"  placeholder="Date" >
           </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-4 col-xs-10">
         <button class="btn btn-primary btn-lg " type="submit" >Submit</button>
           </div>
        </div>
</form>

validation datepicker twitter-bootstrap glyphicons
person Hanan Ashraf    schedule 26.11.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Дата не проходит проверку, потому что вы пытаетесь проверить ее с помощью formvalidation средства выбора даты пользовательского интерфейса $('#myform').formValidation('revalidateField', 'date'); с .on('changeDate', function(e) если вы используете подключаемый модуль Bootstrapvalidator для проверки поля ввода даты $('#myform').bootstrapValidator()

Простыми словами, вы пытаетесь использовать 2 разных плагина проверки вместе.

На данный момент, если вы не уверены, какой плагин вы хотите использовать для проверки поля даты, решение будет опубликовано как с formValidation, так и с Bootstrapvalidation.

Решение с помощью Bootstrapvalidation

JS-скрипт будет

$(document).ready(function() {
    $('#myform').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },

        fields: {
            date: {
                validators: {
                    notEmpty: {
                        message: 'Last date is required'
                    },
                    date: {
                        format: 'MM/DD/YYYY',
                        min: '01/01/2010',
                        max: '12/30/2020',
                        message: 'The date is not a valid'
                    }
                }
            },
        }
    });
});

и datepicker проверка будет

$(document).ready(function() {
    $( "#datepicker" ).datepicker({
        onSelect: function(){
            $('#myform').bootstrapValidator('revalidateField', 'date');
        }
    });
});

Поскольку вы используете jQuery Datepicker, вы не можете проверить его с помощью onChange, как рассматриваемый вами подход, вы должны проверить его с помощью OnSelect

Скрипт проверки начальной загрузки

Решение с помощью formValidation

JS будет

$(document).ready(function () {
    $('#myform').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            date: {
                validators: {
                    notEmpty: {
                        message: 'Last date is required'
                    },
                    date: {
                        format: 'MM/DD/YYYY',
                        min: '01/01/2010',
                        max: '12/30/2020',
                        message: 'The date is not a valid'
                    }
                }
            }
        }
    }).find('[name="date"]')
        .datepicker({
        onSelect: function (date, inst) {
            // Revalidate the field when choosing it from the datepicker
            $('#myform').formValidation('revalidateField', 'date');
        }
    });
});

Поскольку вы используете jQuery Datepicker, вы не можете проверить его с помощью onChange, как ваш рассматриваемый подход, вы должны проверить его с помощью OnSelect

скрипт проверки формы

person Shehary    schedule 26.11.2015
comment
Заметно..! Но, к сожалению, тот же код у меня не работает. Он показывает ошибку проверки начальной загрузки для пустого поля.. :( - person Hanan Ashraf; 26.11.2015
comment
можете ли вы обновить эту скрипту кодом, который вы используете jsfiddle.net/bk1o5ap7, просто добавьте скрипт и сохраните и по ссылке сюда - person Shehary; 26.11.2015