This is a migrated thread and some comments may be shown as answers.

Does the upload control work with validation?

7 Answers 412 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Todd
Top achievements
Rank 1
Todd asked on 05 Jan 2012, 03:31 AM
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

Sort by
0
Accepted
Rosen
Telerik team
answered on 06 Jan 2012, 12:31 PM
Hi,

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:

 

Regards,
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
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
Rosen
Telerik team
answered on 30 Aug 2012, 05:51 AM
Hi Eric,

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
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
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?
0
David
Top achievements
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();
});
0
Andy F.
Top achievements
Rank 1
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;
}

Tags
Upload
Asked by
Todd
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Eric
Top achievements
Rank 1
David
Top achievements
Rank 1
Andy F.
Top achievements
Rank 1
Share this question
or