QBO3 form validation classes being overwritten

Question

I have a QBO3 form that I've added custom javascript to for validation. When I add a 'validation-failed' class to my element using:

set('class','Validation-Failed') 

which causes the UI to behave correctly. However, clicking on another field causes the 'Validation-Failed' classed to be replaced by 'Validation-Passed'.

Something is overriding the specific fail from happening.

Answer 1

The validation classes are injected by the Mootools FormValidator class for UI; you're manipulating them "under the hood", instead of using a proper validator.

QBO3 offers a bunch of built-in validators, with extensive details available in qbo.Validation.js.

If we don't offer the functionality you need, you can easily craft JS to do whatever you want, and bind it into the form validation as follows:

<input type="text" class="myCustomValidator" .../>

and include the following javascript:

Form.Validator.addAllThese([
    ['myCustomValidator', {
        errorMsg: function (element, props) {
            return 'Please make this message more useful to the end user.'
        },
        test: function (element) {
            return (element.value =- "MyExactValue");
        }
    }]
]);