3

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 ?

2

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.

  • Thx for the link. As BOD are 3 fields together I'm not yet sure how to use this on this "combo" fields. – nbar Oct 7 '13 at 13:23
  • as far as I know the DOB field values are set in a hidden input dob-full and that's actually what's validated. with the class given to the 3 inputs. Otherwise, a less nicer option, would be to retrieve the 3 values from the validation function hardcoded – Sander Mangel Oct 7 '13 at 13:30
  • I try the method in the link again. But still have no luck get it working. What I have done: in the dob.phtml there is a div with id "dob-full". I added class="validate-dob" to the inputfield in this div. Then I added this JS: Validation.add('validate-dob','test',function(the_field_value){ if(the_field_value == 'test'){ return true;} return false;}); But this dont work at all. Any idea? – nbar Oct 11 '13 at 8:55
  • Isn't validate-dob an already existing check? I would use a unique name that doesn't exist yet – Sander Mangel Oct 11 '13 at 9:27
  • no it's not. And the name isn't the problem anyway. I tried also validate-alpha (only letters) and it passed the validation too. I think a problem is, that the dob-full is not filled until DateElement gets validated. I could validate the single items (year, month, day) but then I get the error message at the wrong place. Any ideas left? – nbar Oct 11 '13 at 9:40
1

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.

1

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...

  • Thanks for the share. I tried your snippet and it works well, except, you need to call maxDate.getFullYear() method instead of maxDate.getYear() – Sony Jun 6 '18 at 12:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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