[Solved] Validator not working as expected with templates or button clicks

[Brendan]

Hello,

I am new to kendo and the forum. I am having trouble understanding how to use the Validator with Observable objects and templates. I can data-bind all of the data and the validator works great on views with no templates or nested objects but when I try to implement the validator on a page that contains a template, it does not work as expected.

So, on initially changing an input, I get the proper validation error. But then when I change any other field, all of my error messages go away.

 For example, field2 must be length 10. So if I input a number of length 4 on the first object, i get a validation message when I leave the field. Now, if I go edit any other field rendered then that validation message will go away even though the length is still 4 in that input. So if I change the second objects field 3, then i lose my validation message on object ones field2.

 On my other views without templates, the validation messages stay until I validate the field, they don't change based on other fields changing.

 Hopefully this is enough information, let me know if I left something out or need to be more specific.

The code looks like this:

<div id="fieldTab">
    <div data-bind="source: fields" data-template="fieldTemplate" />
</div>

<script id="fieldTemplate" type="text/x-kendo-template">
    <select name="field1#= fieldSys#" data-role="dropdownlist" data-bind="value: field1" />
    <input name="field2#= fieldSys#" class="k-textbox" type="text" pattern=".{10,10}" data-bind="value: field2" />
    <input name="field3#= fieldSys#" class="k-textbox" pattern=".{0,20}" type="text" data-bind="value: field3" />
</script>

 

var fieldTab = $("#fieldTab");
var viewModel = kendo.observable({

 fields: [

        {fieldSys: "1",field1: "1", field2: "1", field3: "1"},
        {fieldSys: "2",field1: "2", field2: "2", field3: "2"},
        {fieldSys: "3",field1: "3", field2: "3", field3: "3"}
    ]
});
fieldTab.kendoValidator().data("kendoValidator");
kendo.bind(fieldTab, viewModel);

[Brendan]

I may have figured this out.

 Instead of just setting the fields object on the viewModel, I changed to using a datasource and it appears to have fixed the issue. Does the code below look like a proper solution?

 I still have the issue with the validation message not going away when the clear function is called but I may be able to figure it out as well. I thought calling the set function and changing the object would trigger the validation message to go away but it seems like it only goes away onBlur.

fieldTab = html.find("#fieldTab");
validator = fieldTab.kendoValidator().data("kendoValidator");

var Field = kendo.data.Model.define(
{
    id: "fieldSys",
    fields:
    {
        fieldSys: { type: "string" },
        field1: { type: "string" },
        field2: { type: "string" },
        field3: { type: "string" }
    }
});

var Fields = new kendo.data.DataSource(
{
    transport:
    {
        read: function (options) {
            setTimeout(options.success({ d: data }), 1000);
        }
    },
    schema:
    {
        data: "d",
        model: Field
    },
    change: function (e) {
        this.parent().set("fields", this.data());
    }
});


viewModel = kendo.observable({
    clear: function (e) {
        var field = e.data;
        field.set('field1', null);
        field.set('field2', null);
        field.set('field3', null);
    },
    dataSource: Fields,
    fields: []
});
Fields.read();
kendo.bind(fieldTab, viewModel);

[Vladimir Iliev]

Hi Brendan,

Basically the validator listens on "change" event of the editor - that why in order to update manually the target editor you should update the editor value and trigger this event.  

Also I'm not sure that I understand correctly what is the exact scenario that you have, however the use of "read" option as function is a valid approach (you can remove the use of "setTimeout" method inside it). If you need to enable CRUD operations you should define the other operations as functions. 

Regards,
Vladimir Iliev
Telerik

 

 

[Brendan]

Thanks for the response.

What are you referring to when you mention the editor? Is that the viewModel?

The issue I was experiencing was I had the validator initialize and validate when I clicked the save button. Then once any field was changed, all of the validation error messages would go away but I only wanted the messages to go away as they were updated. This was fixed by my second post where I implemented a datasource that set the fields object on my viewModel.

 Now the issue is that I have Add/Remove buttons to add or remove more fields. Which it will add and remove the data but it will not reflect new templates UI side for the added or removed items. My solution was to unbind then bind the viewModel again. Does anyone know of a better solution for this?

 Then the second issue I am still having is that when you click the clear button which sets the values of the item to an empty string, it does not clear the validation for that field. (Vladimir may have answered this with his previous post, I might just need to trigger a change event)

  Here is a fiddle that reflects both of these problems:

http://jsfiddle.net/y15trksh/6/

1. Click the add/remove buttons and notice it does not add any new ui templates but it does add to the viewModel 

2. remove data from fields, then the required message will show, then click clear, note that the required message still shows.

I believe the first issue is caused because of the way I set up the viewModel with the data source, but I needed to do that in order to keep the validation messages from all removing when a field is changed.

I am assuming the second issue is caused because a change event is not being fired.

 

Also I removed the timeout, I am actually pulling in remote data so I didn't need the function.

 Thanks for the help!

[Brendan]

Here is a little more background,

 I have a page that contains a nested json object that contains arrays of objects.

fields = {
    first: [],
    second: []
}

 

The user needs to be able to add and remove items from each array. I am also adding validation to every field and would like it to only show messages on save and only remove them as they are fixed.

 My solution was to use kendo templates, observables, and validator in order to accomplish these requirements.

So the observables would keep track of my data, the templates would keep track of displaying my data (add/remove etc), then the validator would keep track of my validation.

I cannot find a kendo demo that utilizes all three of these constructs together.

Any thoughts or other solutions would be appreciated as I am new to kendo and would like to implement this correctly.

 

[Vladimir Iliev]

Hello Brendan,


Currently we have no such example which combines these constructs in the way that you need, however for your convenience I updated provided example to add / remove and validate the items correctly:

• http://jsfiddle.net/y15trksh/7/

Regards,
Vladimir Iliev
Telerik