Question

After failed client side validation of a form Trinidad shows error messages and highlights labels of failed inputs. I need to highlight the input fields themselves. Is it possible to do it somehow? The most desperate solution I can think of is attaching js event listener on DOMAttrModified event on labels, but it’s really an awful hack.

Answer 1

We’ve finally chosen another hack. After the document is loaded, we replace the trinidad’s function for submiting the form with our implementation which triggers an event after failed validation and this hook then loops through all validation messages, looking for id of input with error (and set it’s style). Ugly, but works. This is the ilustration of that idea using jQuery (just a sketch, not tested):

$(window).load(function () {
//save original function for form submit
var originalSubmit = window.submitForm;
//replace function for form submit with custom implementation that triggers some event in case of validation failure
window.submitForm = function (form, doValidate, parameters, isPartial) {
    var retval = originalSubmit(form, doValidate, parameters, isPartial);
    if (!retval) {
        $(window).trigger('failedFormValidations', [form, doValidate, parameters, isPartial]);

    }

}

//bind a listener for failed validations which performs the desired behavior
$(window).bind('failedFormValidations', function(event, form, doValidate, parameters, isPartial) {
    // reset all inputs to nonhighlighted state, then loop through all labels and hightlight inputs with error
});
}