Magento registration date of birth in one field

Question

I want that in my customer regitration form date of birth field to be in one field. Now it's in 3 fields. So I have

<div class="input-box customer-dob">
    <input type="text" id="<?php echo $this->getFieldId('dob') ?>" name="<?php echo $this->getFieldName('dob') ?>"
           class="input-text validation-custom required-entry"/>
</div>

But validation don't working. Have you any idea?

Answer 1

In your code, instead of validate-custom provide validate-date as the class for the input field.

The validation script for this can be found in js/prototype/validation.js line 503

'validate-date', 'Please enter a valid date.', function(v) {
                var test = new Date(v);
                return Validation.get('IsEmpty').test(v) || !isNaN(test);
            }],

Answer 2

Excellent question!

You don't need jQuery for this. You can do this with the built-in Magento form validator. First the javascript to set up the form for validation must be placed in your form template:

<script type="text/javascript">
  var myForm= new VarienForm('[your form id]', true);
</script>

Now prepare your form fields by adding the appropriate css classes.

Cannot have number greater than 9.99

<input type="text" class="required-entry validate-digits-range digits-range-0-9.99"/>

No spaces in the fields

<input type="text" class="required-entry validate-alphanum"/>

That's it! For the more specific use cases you'll have to add custom validation rules:

Only number fields need to have .00 to validate 1 to 1.00

Validation.add('validate-float','Input must be in the form of 0.00',function(v){
    return Validation.get('IsEmpty').test(v) || (!/\./.test(v));
});

Which then is validated with the following:

<input type="text" class="required-entry validate-float"/>

Letters need to be uppercase

This one is similar, the regex must test for a range of uppercase:

Validation.add('validate-uppercase','Input must be in uppercase',function(v){
    return Validation.get('IsEmpty').test(v) || (!/^[A-Z]+$/.test(v));
});

And used like:

<input type="text" class="required-entry validate-uppercase"/>

Please navigate this link hope it will help you:

http://inchoo.net/ecommerce/magento/magento-frontend/magento-form-field-ajax-validation/

Answer 3

The solution is super simple – crack open your

/js/varien/js.js

file and change this:

var error = false, day = parseInt(this.day.value) || 0, month = parseInt(this.month.value) || 0, year = parseInt(this.year.value) || 0;

which is on about line 437, to this:

var error = false, day = parseInt(this.day.value, 10) || 0, month = parseInt(this.month.value, 10) || 0, year = parseInt(this.year.value, 10) || 0;

and that’s it!

Answer 4

What validate-date doesn't do is that it also accepts futuristic date.

I have created a class validation (using only Prototype) have a look , enjoy coding

<input type="hidden" name="dob" class="validate-dob" id="dob" current-date="<?php echo date('m/d/Y')?>"/>


Validation.add('validate-dob','Please enter a valid birthday',function(value,el){`enter preformatted text here`
                        if(value != ''){
                          var pattern =/^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;
                          var month = value.substring(0,2);
                          var day = value.substring(3,5);
                          var year = value.substring(6,10);
                          var current_date = el.readAttribute('current-date');
                          var current_month = current_date.substring(0,2);
                          var current_day = current_date.substring(3,5);
                          var current_year = current_date.substring(6,10);
                          var dob = new Date(year, month - 1, day);
                          var current_date = new Date(current_year, current_month - 1, current_day);
                          if(!pattern.test(value) || (current_date <= dob)){
                              return false;
                          }
                        }
                        return true;
                     });