Dynamic text in prototype field validation

Question

Say I'm adding a custom field validation method like so:

Validation.addAllThese([

['field-required-entry', 'Please enter a value for' + var, function (v) {
    //Add your own validation code here
    console.log(Validation);
    return !Validation.get('IsEmpty').test(v);
}]

]);

Is there any way to make the returned error string dynamic i.e replace 'var' in that second parameter with the field label value?

Answer 1

I know it's a bit backwards, but you can access the Validation object inside your validation method and then modify it dynamically while you run your test. What you can do is for example, add a new method to the Validation object:

Validation.updateError = function(validationName, e, error){
    var validation = Validation.get(validationName),
        advice = Validation.getAdvice(validationName, e);

    validation.error = error;
    if (advice) advice.innerHTML = error;
    return false;
}

Then make a custom validation rule like this:

Validation.add('validate-roll-dice', null, function(v, e){
    var validationName = 'validate-roll-dice',
        randomRoll = Math.floor(Math.random() * 6) + 1;

        switch (randomRoll){
            case 1:
                return Validation.updateError(validationName, e, "You rolled 1, you're not good at this are you.");
            case 2:
                return Validation.updateError(validationName, e, "You rolled 2, still not that impressive.");
            case 3:
                return Validation.updateError(validationName, e, "You rolled 3, you could use some practice.");
            case 4:
                return Validation.updateError(validationName, e, "You rolled 4, I guess you passed?");
            case 5:
                return Validation.updateError(validationName, e, "You rolled 5, not bad, not bad...");
            case 6:
                console.log("You did it, don't get cocky kid.");
                return true;
    }
});

In your case, you could access a variable from outside the closure to get the result you want. Of course this only works for new custom rules. If you want to do that on existing rules, you'll have to delete them first and then recreate them with the new error message rules.

Alternatively you could monkey patch the Validation.createAdvice method to evaluate the error parameter as a function if a closure is passed and then do something like this:

Validation.addAllThese([
    ['field-required-entry', function(){return 'Please enter a value for' + var; }, function (v) {
    //Add your own validation code here
    console.log(Validation);
    return !Validation.get('IsEmpty').test(v);
}]

But that should definitely be a last resort kind of thing. I don't recommend you do that.

Answer 2

The easiest way to do this is to add the custom validation in the phtml

<div class="validation-advice" id="field-required-entry-[inputID]" style="display:none;">Please enter a value for [something specific here].</div>

you can keep a default message in the prototype for backup