Custom property and validation

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
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
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
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.