2

How can i validate the date field on frontend with magento default date validation class. I think it has one.

For required entry, I used data-validate:

<input type="text" placeholder="<?php /* @escapeNotVerified */ echo __('DOB (YYYY-MM-DD)') ?>" name="dob" id="dob" value="<?php echo $profileData['dob']; ?>" title="<?php /* @escapeNotVerified */ echo __('Date Of Birth') ?>" class="input-text validate-date" data-validate="{required:true}">

and added the form validate script:

<script type="text/javascript">
//added by navin
require(['jquery','mage/mage'], function(){
    var dataForm = jQuery('#edit-form-validate');
    dataForm.mage('validation', {});

});   

</script>

required validation is working fine but I want to validate if the input date is in correct date format.

This also arise a question, In which file magento defines all the validation class?

1 Answer 1

2

You can do it using errorPlacement function,

   <script type="text/javascript">
    //added by navin
    require(['jquery','mage/mage'], function(){
        var dataForm = jQuery('#edit-form-validate');
        dataForm.mage('validation', {
             errorPlacement: function(error, element) {
                    var errorPlacement = element;
                    console.log(element.val());
                    if (element.val()) {

                        //do your custom validation code.....
                    }
                }

        });

    });   

    </script>
7
  • ok I got your point.But i was searching for some class that validates date, I think there should be one don't you think so? like validate-date. Commented Nov 21, 2016 at 11:22
  • 1
    yes validate-date is used for date, you can check it from /lib/web/mage/validation.js folder. Commented Nov 21, 2016 at 11:24
  • 1
    All validation of magento frontend js is comes from validation.js file. Commented Nov 21, 2016 at 11:25
  • so how do I use it here. I added the class vadidate-date but it is not working. should i add anything else? Commented Nov 21, 2016 at 11:33
  • You have added correct class in your input. This is default class. Commented Nov 21, 2016 at 12:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.