How do you create a custom validator in frontend?

[czcpf]

Hello,

I extended a field view like:

define('custom:views/xray-machine/fields/xray-modality-category', ['views/fields/link'], function (Dep) {

setup: function () {
//call parent setup
Dep.prototype.setup.call(this);​
this.validations.push('validateLinkDependent');
},

validateLinkDependent: function () {
//TODO fix this
console.log('called: validateLinkDependent');
let msg = this.translate('fieldInvalid', 'messages')
.replace('{field}', this.getLabelText());
this.showValidationMessage(msg);

return true;
}​,
})

When I go to edit the entity and then click save, it appears to invoke validate but an error is thrown?

[Error] TypeError: undefined is not an object (evaluating 'this[method].call')
validate (base.js:1442)
validateField (base.js:851)
(anonymous function) (base.js:811)
forEach
validate (base.js:810)
save (base.js:1043)
actionSave (detail.js:522)
handleAction (utils.js:75)
click .button-container .action (detail.js:468)
executeBound (underscore.js:986)
(anonymous function) (underscore.js:1018)
(anonymous function) (underscore.js:74)
dispatch (jquery.js:5430)


This is strange to me because the built in validateRequired function of views/fields/link seems to be constructed the same way and it works fine.

validateRequired: function () {
if (this.isRequired()) {
if (this.model.get(this.idName) == null) {
var msg = this.translate('fieldIsRequired', 'messages')
.replace('{field}', this.getLabelText());
this.showValidationMessage(msg);

return true;
}
}
},​

[yuri]

You have a mistake here

this.validations.push('validateLinkDependent');

Should be

this.validations.push('linkDependent');

[czcpf]

yuri thank you sir! I am not sure how I missed that. It works perfectly now. I will be posting a solution soon to:

https://forum.espocrm.com/forum/developer-help/82970-autocomplete-link-options-based-on-another-link

which I think will be a good addition and would appreciate your feedback.

[czcpf]

yuri thank you again for your help. All is working well with this in edit-mode but I'm struggling with the validation for inline-edit. This is what I have so far. As noted below, without throwing a javascript error, the record still saves even though validation fails in inline-edit mode. How do I prevent inlineEditSave from saving the record here?

define('custom:views/xray-machine/fields/xray-modality-category', ['views/fields/link'], function (Dep) {
    return Dep.extend({
        setup: function () {
            //call parent setup
            Dep.prototype.setup.call(this);​
            this.validations.push('linkDependent');
            this.listenTo(this.model,'before:save', () => {
                if( this.validate() ) {
                    Espo.Ui.error('Invalid', true);
                    throw new Error('Invalid'); //Without this line, the validation proceeds but the record still saves... ? How do stop inlineEditSave from saving the record ?
                }
            });​
        },
        validateLinkDependent: function () {
            console.log('called: validateLinkDependent');
            if(true) { // my custom validation logic here
                let msg = this.translate('fieldInvalid', 'messages')
                    .replace('{field}', this.getLabelText());
                this.showValidationMessage(msg);
                return true;
            }
        }​,
    });
});​