Announcement

Collapse
No announcement yet.

How do you create a custom validator in frontend?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How do you create a custom validator in frontend?

    Hello,

    I extended a field view like:

    Code:
    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.

    Code:
    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;
    }
    }
    },​

  • #2
    You have a mistake here

    this.validations.push('validateLinkDependent');

    Should be

    this.validations.push('linkDependent');

    Comment


    • #3
      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/deve...n-another-link

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

      Comment


      • #4
        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?

        Code:
        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;
                    }
                }​,
            });
        });​



        Comment

        Working...
        X