CODEWITHSUNDEEP
javascriptjqueryvalidationdatepickerparsley.js
J Ramesh Fernandez
J Ramesh Fernandez

Reputation: 309

Parsleyjs Date Validation Doesn't work on Datepicker Events like Onchange

I have a form with date picker input field which asks for value even after the date is chosen.

note: This error doesn't come when i type the value.

enter image description here 

<input data-parsley-trigger="change" name="epa_date" required type="text" class="form-control" id="single_cal1" placeholder="(YYYY/MM/DD)">
<script>
$('#single_cal1').daterangepicker({
            singleDatePicker: true,
              minDate: moment(),
             format: 'YYYY/MM/DD',
            maxDate:  moment().add(15, 'days'),
            calender_style: "picker_1"
        }, function (start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
        });
</script>

Edit Note: I have updated the script for date picker i use. I am using Parsleyjs for all validations.

Upvotes: 2

Views: 6494

Answers (5)

Chelsea Saffold
Chelsea Saffold

Reputation: 81

When you initialize parsley, add change to triggerAfterFailure, so when you pick a date or change the date, parsley will revalidate. The default for triggerAfterFailure is input.

$('form.parsley').parsley({
        triggerAfterFailure: 'input change'
});

Upvotes: 1

Brad
Brad

Reputation: 12252

I ran into the issue w/ the bootstrap-datepicker and this fixed the issue for me: https://bootstrap-datepicker.readthedocs.io/en/latest/events.html

$('#datefield').datepicker()
    .on('changeDate', function(e) {
        $(this).parsley().validate();
});

Upvotes: 9

endroo
endroo

Reputation: 475

I am using the DatePicker with Parsley 2.0, and this worked for me (thanks @siva anand).. 

$(function() {
    $("#yourdatefield").datepicker({ 
        dateFormat: 'yy-mm-dd', 
        onClose: function () {
        $(this).parsley().validate();
        }
    });

and then in the parsley field..

'data-parsley-trigger'          => 'change focusout',

Upvotes: 3

Siva Anand
Siva Anand

Reputation: 2882

Try this, i have triggered the parsley again in daterangepicker. It worked for me.

   <input data-parsley-trigger="change" name="epa_date" required type="text" class="form-control" id="single_cal1" placeholder="(YYYY/MM/DD)">
    <script>
    $('#single_cal1').daterangepicker({
                singleDatePicker: true,
                  minDate: moment(),
                 format: 'YYYY/MM/DD',
                maxDate:  moment().add(15, 'days'),
                calender_style: "picker_1"
            }, function (start, end, label) {
                $('#single_cal1').parsley().validate();
                console.log(start.toISOString(), end.toISOString(), label);
            });
    </script>

Hope it helps..

Upvotes: 2

gregory
gregory

Reputation: 79

According to this bug report, it looks like the validation has to be triggered manually on change. The following worked for me:

var d = $('#single_cal1');
d.daterangepicker({
  onClose: function() {
    d.validate();
  }
});

Upvotes: 0

Related Questions