I am trying to use the validator with the upload control and even though I have selected a file, the validation is returning false. Attached is the source and the image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Upload documents for Andy Redi</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/Kendu/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/Kendu/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Content/Kendu/js/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div class="clear">
</div>
<div class="log-on">
Welcome <a href="/Account/Details">thilehoffer</a>
<a href="/Account/LogOff">Log Off</a>
<a href="/Admin">Admin</a>
</div>
<div class="clear">
</div>
</header>
<section id="main">
<h2>Upload documents for Andy Redi</h2>
<form
action="/Document/Create/3aaa624e-7f23-4532-9c24-10315cd665af"
enctype="multipart/form-data" method="post"><input id="StudentId"
name="StudentId" type="hidden"
value="3aaa624e-7f23-4532-9c24-10315cd665af" /> <fieldset>
<legend>Upload Files</legend>
<div class="data-entry-container">
<label for="CategoryList">
Document Category</label></div>
<div class="data-entry-container">
<select id="CategoryList" name="CategoryList" required validationmessage="Category is required">
<option value=''> </option>
<option value='1'>IEP </option>
<option value='2'>Evaluation </option>
<option value='3'>Other </option>
</select>
</div>
<div class="data-entry-container">
<span class="k-invalid-msg" data-for="CategoryList"></span>
</div>
<div class="clear">
</div>
<div class="data-entry-container">
<label for="PostedFileBase">
Document File</label></div>
<div class="data-entry-container">
<input id="PostedFileBase" name="PostedFileBase"
type="file" validationmessage="A file is required" required/>
</div>
<div class="data-entry-container">
<span class="k-invalid-msg" data-for="PostedFileBase"></span>
</div>
<div class="clear">
</div>
<br />
<input id="CategoryId" name="CategoryId" type="hidden" value="0" />
<input type="submit" value="Save File" />
</fieldset>
<p>
<a Length="0"
href="/Student/Documents/3aaa624e-7f23-4532-9c24-10315cd665af">Back
to documents for Andy Redi</a>
</p>
<script type="text/javascript">
//Functions
/*Set the value of hidden fields that will store the value selected from the drop down*/
function CategoryListChange() {
var dropdownlist = $("#CategoryList").data("kendoDropDownList");
var hiddenField = $("#CategoryId");
hiddenField.val(dropdownlist.value());
}
$(document).ready(function () {
$("#CategoryList").kendoDropDownList({ change: CategoryListChange });
$("#PostedFileBase").kendoUpload({multiple: false });
var validatable = $("form").kendoValidator().data("kendoValidator");
$("#save").click(function () {
if (validatable.validate()) {
return true;
}
return false;
});
});
</script>
</form>
</section>
<footer>
</footer>
</div>
</body>
</html>
7 Answers, 1 is accepted
0
Accepted
Hi,
Rosen
the Telerik team
I'm afraid that the KendoUpload is currently not support out-of-the-box by the KendoValidator. However, you may workaround this limitation by supplying a custom validation rule similar to the following:
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eric
Top achievements
Rank 1
Rank 1
answered on 29 Aug 2012, 10:14 PM
The solution doesn't seem to be working for me. Has something possibly changed recently with the structure of the upload widget that would be causing the function to never try to validate an input with a type of file?
0
Hi Eric,
Rosen
the Telerik team
I'm afraid that I'm unable to observe such issue with the sample. Here is an version of the jsFiddle with updated to the latest version of KendoUI scripts, maybe I'm missing something.
All the best,Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eric
Top achievements
Rank 1
Rank 1
answered on 30 Aug 2012, 03:25 PM
Thanks for taking the time to create a new sample. It was actually a problem on my end. I had the required attribute applied to the Upload widget which was causing it to always see it as invalid. Once I removed the required attribute it worked like it did in your sample. Thanks again.
0
David
Top achievements
Rank 1
Rank 1
answered on 15 Oct 2012, 10:57 AM
This makes the warning show already when a user selects a file. And then it doesn't go away when the file is selected. Not until the send/save/submit button is clicked...
Is there any solution for this?
Is there any solution for this?
0
David
Top achievements
Rank 1
Rank 1
answered on 15 Oct 2012, 11:17 AM
Seems to work better when adding:
$("form .k-upload-button").on("change", "input[type=file]", function () {
$(this).blur().focus();
});
$("form .k-upload-button").on("change", "input[type=file]", function () {
$(this).blur().focus();
});
0
Andy F.
Top achievements
Rank 1
Iron
Rank 1
Iron
answered on 19 Sep 2016, 08:12 PM
Coming back to this, the example is missing a test to see if the file passed its own upload widget validation (e.g., allowedExtensions).
upload: function(input) { if (input[0].type == "file" && isNew) { return (input.closest(".k-upload").find(".k-file").length > 0 && input.closest(".k-upload").find(".k-file-invalid").length == 0); } return true;}