I am following the “Basic Usage” example. I am using the variant wherein I specifically create a <span data-for=”id_of_validated_control”> for each field. In this case, I have two fields, the first being "Name", the second being "Code".
“Name” and “Code” each have a ‘k-invalid-msg’ span. Now let’s say I blank out the second field ‘Code’ first. It’s get “Code is required” message. So far so good. Now I put a value in Code, then go to the field above it – “Name” – blank it out, and blur. I expect the <span> next to "Name" to get a message, but what happens is that “Name is required” displays in the span adjacent to “Code” field, becauseat the moment I tab out of the "Name" field, the <span data-for=”name” class=”k-invalid-msg”/> is removed from the DOM, and Code’s <span> is the one populated.
I have tried several approaches. The first approach is to declare my own <span data-for="name_of_validated_input" class="k-invalid-msg></span> after each <input> that has the "required" attribute. I also tried not declaring my own <span>'s, and applying a validationMessage="xxx is required" to each <input> that has the "required" attribute.
Here is one of the <input> controls with an explicit <span>. Note that this is copied from Chrome "inspect element" which is adding the ="" to required.
<div class="form-FieldOuter" id="view-FieldBox1" style="display:block;">
<label for="view-FieldBox1CodeInput" class="form-label" style="overflow:hidden;">Code</label>
<input type="text" class="form-control" id="view-FieldBox1CodeInput" data-bind="value: Code" required="" validationmessage="Code is required.">
<span class="k-invalid-msg" data-for="view-FieldBox1CodeInput"></span>
</div>
And a couple of notes/comments:
1. In my program's html output, the attribute doesn't have a value, it looks like <input id="x" name="x" required validationmessage="blah blah"/>
2. I've tried also assigning the name attribute. But I see from other forum post that data-for relates to the 'id' attribute and not the 'name' attribute, so I think my use above should be correct in that regard. (see: http://www.kendoui.com/forums/framework/validation/is-there-a-way-to-control-the-position-of-validation-messages.aspx , where it says To force it to use specific place for its hint, place a span with data-for="your_input_id" and class="k-invalid-msg", so that the Validator can recognize and use it )
3. I observe that data-role="validator" is being applied to the <div> that contains my form and all of the validated <input> and their <span> elements.
4. Using kendo.web.js from version 2012.1.322 Full-license not minified.
GET http://localhost:3223/DataServices/Application-myDomainService.svc/JSON/UpdateDATA?AUTOID=1&CODE1=code1&CODE2=code2 HTTP/1.1
Host: localhost:3223
Connection: keep-alive
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.83 Safari/535.11
Accept: application/json, text/javascript, */*; q=0.01
Referer: http://localhost:3223/Pages/Home.aspx
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie: ASP.NET_SessionId=dl1a5qkkzbsaur0o5qlhuvhf
[Authorize] [HttpPost] public String AddFile(int Id, IEnumerable<HttpPostedFileBase> attachments) { Response.ContentType = "text/plain"; return @"{""status"": 0, ""data"": [{""DocumentId"": ""5""}]}"; }
$("#attachments").kendoUpload({ async: { saveUrl: saveURL, removeUrl: removeURL, autoUpload: true }, upload: attachOnUpload, success: attachOnSuccess, error: attachOnError });function attachOnUpload(e) { e.data = { Id: '@Model.Id' } } function attachOnSuccess(e) { var hiddenField = $("#DocumentId"); hiddenField.val(e.DocumentId); } function attachOnError(e) { debugger; //always fires no matter what is returned from controller }
$("#testing_listview").kendoMobileListView({ ...
function testing_show() {
$("#testing_listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: data_testing_list(), group: "letter" }),
template: $("#testing_listview_template").html(),
headerTemplate: "${value}"
});
}
Thanks for your help
Matt
<script>
$(document).ready(
function
() {
$(
"#netflixTable"
).kendoGrid({
dataSource: {
type:
"odata"
,
serverFiltering:
true
,
filter: [{
field:
"Name"
,
operator:
"contains"
,
value:
"Star Wars"
}, {
field:
"BoxArt.SmallUrl"
,
operator:
"neq"
,
value:
null
}],
transport: {
}
},
sortable:
true
,
rowTemplate: kendo.template($(
"#rowTemplate"
).html()),
height: 200
});
});
</script>
<
input
id
=
"slider"
class
=
"balSlider"
/>
<
script
>
$(document).ready(function(){
$("#slider").kendoSlider({
increaseButtonTitle: "Right",
decreaseButtonTitle: "Left",
min: 0,
max: 10,
value: 1,
smallStep: 1,
largeStep: 1,
tickPlacement:"both"
}).data("kendoSlider");
var slider = $("#slider").data("kendoSlider");
slider.enable();
});
</
script
>