2

I was looking for validation for multiple fields. There are a lot of tutorials/articles with single field validation. But how to create fully-working validation for combined fields - 2 (or more fields) with one message. For example, I'd like to validate: XX YYY where XX and YYY are different (input type text) fields. I have created custom Validation.add() but there is still problem with adding/removing classes from both fields. My code looks like this:

Validation.add('validate-postcode', Translator.translate('Please enter a valid post code.'), function (v, elm) {
    var elem1 = jQuery(elm),
        relatedElem = jQuery('#' + elem1.attr('data-related-field')),
        passed = false;
    if (typeof relatedElem !== 'undefined') {
        relatedElem.removeClass('validation-failed');
        relatedElem.removeClass('validation-passed');
        elem1.removeClass('validation-failed');
        elem1.removeClass('validation-passed');
        passed = !Validation.get('IsEmpty').test(elem1.val()) &&
                !Validation.get('IsEmpty').test(relatedElem.val()) &&
                /^\d{3}$/.test(elem1.val()) &&
                /^\d{2}$/.test(relatedElem.val());
        if (!passed) {
            relatedElem.addClass('validation-failed');
            elem1.addClass('validation-failed');
        }
    }
    return passed;
});

In this source data-related-field is the attribute for one field to be related with another - value of this attribute is id of related field.

1

After few hours of experimenting I made some changes for previous code which works for my problem:

jQuery(document).ready(function () {
    Validation.add('validate-postcode', Translator.translate('Please enter a valid post code.'), function (v, elm) {
        var elem1 = jQuery(elm),
                relatedElem = jQuery('#' + elem1.attr('data-related-field')),
                passed;
        elem1.removeClass('validation-failed');
        elem1.removeClass('validation-passed');
        if (typeof relatedElem !== 'undefined') {
            relatedElem.removeClass('validation-failed');
            relatedElem.removeClass('validation-passed');
            passed = !Validation.get('IsEmpty').test(elem1.val()) &&
                    !Validation.get('IsEmpty').test(relatedElem.val()) &&
                    /^\d{3}$/.test(elem1.val()) &&
                    /^\d{2}$/.test(relatedElem.val());
            if (!passed) {
                relatedElem.addClass('validation-failed');
                elem1.addClass('validation-failed');
            }
        }
        return passed;
    });
});

Hope that help or inspire someone for better solution. "Document ready" was required due Translator.translate() existence. Translation of string "Please enter a valid post code." was added in jstranslator.xml file.

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.