Combined form fields validation

Question

After some days off miserable testing and trying to figure out what I'm doing wrong I decided to ask it here.

I'm trying to write a custom validation rule that validates the combination of 2 fields (first & last name). The rule itself is very straight forward, it's a max-length.

I've created this rule and added it to the form field, now I'm unable to get it working. There is just no response, no error messages to be found (no in console or the logs). I started out with a separate js file for the custom rules/ custom js and added it to the page.xml. Meanwhile I've tried adding it to the validation.js to be sure the rule get's loaded, same result.

I have the following questions:

1. If validating 2 fields, does the rule needs to be set on both (the css-class)
2. How would I debug validation rules

This is what I've tried:

Validation.addAllThese([
    ['validate-name-length', 'The combination of first & last name cannot exceed 30 characters.<br/>Use initials if needed', function(v) {

        var length_firstname = $('billing[firstname]').value.length;
        var length_lastname = $('billing[lastname]').value.length;
        var result = true;

    if ((length_firstname + length_lastname) > 30) {
             result = false;
        } else {
             result = true;
        }
        return result;
    }]
}];

I've tried to work with the passed field in the validation but then you have difficulties getting the other field's value.

I have a strong feeling I made some stupid mistake and I'm looking over it. I get confused really quick with the Prototype/JQuery use in Magento. Any help would be appreciated.

Answer 1

1. When setting the CSS class to multiple elements, validation will be triggered multiple times. I guess that is not what you want to achieve. Instead, I suggest setting the validation class to the last element only (here: last name). The downside is: Only that last form element will receive a validation advice on failure.
2. You may just use any debug toolbar available for your browser that comes with a JavaScript debugger.

I just tried to add a validation for the name fields and came up with that solution:

['validate-name-length', 'The combination of first &amp; last name cannot exceed 30 characters.<br/>Use initials if needed.', function (v, elm) {
    var length = 0;
    elm.up(".customer-name").select("input").each(function (input) {
        length += input.getValue().length;
    });
    return length <= 30;
}]

It

• takes the element to be validated,
• traverses up to the common container element,
• collects all inputs within (i.e. name fields) and
• adds up their value lengths.