Age verification. Varien.DateElement vs Varien.DOB

Question

I try to add a age verification to the day of birth field on the registration page. For now I added this code to the Varien.DateElement validate function in the js\varien\js.js file:

today = new Date();
var dateLegal = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate() );
console.log(dateLegal);
if (test.valueOf() > dateLegal.valueOf()) {
    error = 'You must be 18.......';
}

This works how I want it. The problem I have with this is, Varien.DateElement is for every date fields. There is a Varien.DOB special for day of birth. I tried to add there a validate function, but it will be never called.

Varien.DOB = Class.create();
Varien.DOB.prototype = {
    initialize: function(selector, required, format) {
        var el = $$(selector)[0];
        var container       = {};
        container.day       = Element.select(el, '.dob-day input')[0];
        container.month     = Element.select(el, '.dob-month input')[0];
        container.year      = Element.select(el, '.dob-year input')[0];
        container.full      = Element.select(el, '.dob-full input')[0];
        container.advice    = Element.select(el, '.validation-advice')[0];

        new Varien.DateElement('container', container, required, format);
    },
    validate: function() {
        var error = false;
       console.log("validate called"); //I will never be called
    }
};

So is there a better way to add a validation then to place it in Varien.DateElement ?

Answer 1

Please check out this excellent post on creating a custom validation. Adding a second type of validation is cleaner as it doesn't require you to edit existing code.

In your case it would be something like

Validation.add('validate-dob-18','You are not 18',function(value){
   [...]
   calculate nr of years
   [...]
   if(years > 18)
   {
      return true;
   }
   return false;
});

I would suggest also adding PHP validation as Javascript validation as anything but secure.

Also, to work more easily with dates and times check out momentjs.

Answer 2

What I have so far is a own validate rule validate-dob. Then I add validate-dob as a class to the day/month/year inputfields. As errortext I give a single space ' ' and fill the real errormessage in the field: jQuery(".customer-dob > .validation-advice") (that's the errorfield for the hidden dob-full field).

Validation.add('validate-dob',' ',function(field_value){
    console.log("validate-dob");
        var today = new Date();
        var dateLegal = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate() );
        var test = new Date(jQuery(".dob-year input").val(), jQuery(".dob-month input").val()-1, jQuery(".dob-day input").val());
        console.log(test);
        if (test.valueOf() > dateLegal.valueOf() && test.getFullYear() <= today.getFullYear()) { //falls test grösser also Heute - 18j. UND Testjahr nicht grösser als aktuelles Jahr (weil diese überprüfung findet in js.js statt)
            var dob_error = '<?php echo $this->__('Die Zustellung von Wein und Spirituosen kann gemäss geltendem Recht nur an Personen über 18 Jahren erfolgen.'); ?>';
            jQuery(".customer-dob > .validation-advice").html(dob_error);
            jQuery(".customer-dob > .validation-advice").show();
            console.log("return false");
            return false;
        }
        return true;
    });

I'm not that happy with it, cause it says the single fields (day, month, year) are wrong, even if they are not. At least it works and I dont have to overwrite core files.

Answer 3

add this javascript class:

Varien.DOB18 = Class.create();
Varien.DOB18.prototype = {
    initialize: function(selector, required, format) {
        var el = $$(selector)[0];
        var container       = {};
        container.day       = Element.select(el, '.dob-day input')[0];
        container.month     = Element.select(el, '.dob-month input')[0];
        container.year      = Element.select(el, '.dob-year input')[0];
        container.full      = Element.select(el, '.dob-full input')[0];
        container.advice    = Element.select(el, '.validation-advice')[0];

        var minDate = new Date('1/1/1900');
        var maxDate = new Date();
        maxDate.setYear(maxDate.getYear() - 18);
        new Varien.dateRangeDate('container', container, required, format).setDateRange(minDate, maxDate);
    }
};

minDate is necessary to overcome Varien bug...