Custom property and validation

Dejan Caric

Vote:

Hi,

I'm trying to create a custom property using Dojo, and have a few questions regarding validation.

1. Do I have to decorate my property with custom validation attribute(s) in order to get validation message next to Publish button / dropdown? Can I use dojo instead?

2. I have some basic validation logic inside isValid function. If that function returns false, the editor won't be prompted to publish changes, and that's fine. But if he enters valid data, move the focus from that field, and then enters invalid data, he'll be able to publish changes (with valid data from previous step) even though the page is not valid now. How to prevent this?

3. How can I validate the property on server side? I tried like this:

isValid: function() {
    var value = this.myProperty.value;
    $.ajax({
        type: 'POST',
        url: '/api/myproperty/validate/',
        data: { Value: value },
        dataType: 'json',
        success: function (data) {
            return data.IsValid;
        },
        async: false
    });
}

but it doesn't work. The editor is never prompted to publish changes.

Any help would be greatly appreciated.

#122794

Jun 13, 2015 17:36

Grzegorz Wiecheć

Vote:

Hi,

I dont think that you could simply use Deferred object in isValid method.

You could try to add _ValidationMixin to your widget.

Then in your ajax request in success set state to Ok, and in fail set state to "Error":

isValid: function() {
    var value = this.myProperty.value;

var self = this;    

$.ajax({
        type: 'POST',
        url: '/api/myproperty/validate/',
        data: { Value: value },
        dataType: 'json',
        success: function (data) {
            self.set("state", "ok");
        },
        fail: function() {
            self.set("state", "Error");
        },
        async: false
    });

return true;
}

But you should also implement the server validation for model, (for example implementing IValidate interface).

#122798

Jun 14, 2015 22:45

Dejan Caric

Vote:

Hi Grzegorz,

Thanks for help!

The code you sent me always returns true, and epi editor is prompted to publish changes.

I made a small hack using data attribute which seems to work fine.

postCreate: function() {
   ...
   var self = this;
   
   this.myproperty.validator = function() {
      return self.myproperty.attr('data-isvalid') === 'true';
   };
   
   on(this.myProperty, "change", function(e) {
      xhr("/api/myproperty/validate/", {
         data: { Value: e },
         method: "POST",
         handleAs: "json",
         sync: true
    }).then(function(data) {
         if (data.IsValid) {
            self.myProperty.attr('data-isvalid', 'true');
         } else {
            self.myProperty.attr('data-isvalid', 'false');
         }
       self._set('value', data.Url);
       self.onChange(data.Url);
       });
    });
},
isValid: function() {
    var isValid = this.myproperty.attr('data-isvalid') === 'true';
    this.myproperty.validate();

    return isValid;
}

#122803

Jun 15, 2015 11:20