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

Client side validation is failing

2 Answers 172 Views

AsyncUpload

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

Shannon asked on 20 Oct 2015, 03:43 PM

capture.gif

I am trying to only allow pdf's and I am running into a javascript error of Object Expected in the UploadValidation.js file. See the attached image. What am I not doing right? Below is my source code.

<%@ Page Title="Authority Meetings" Language="C#" MasterPageFile="~/themes/default/default.master" AutoEventWireup="true" CodeFile="AddEditMeetings.aspx.cs" Inherits="AddEditMeetings" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<script type ="text/javascript" src="../Scripts/UploadValidation.js"></script>

<link rel="stylesheet" type="text/css" href="../Styles/FileUploadValidation.css" />

<style type="text/css">

#ConstructionPanel {

z-index: 4999 !important;

}

.modal-backdrop

{

background-color: Black;

filter: alpha(opacity=90);

opacity: 0.8;

z-index: 4998 !important;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</ajax:ToolkitScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<Triggers>

<asp:PostBackTrigger ControlID="btnSubmit" />

</Triggers>

<ContentTemplate>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">

<Windows>

<telerik:RadWindow ID="EventsWindow" runat="server" ShowContentDuringLoad="false" Width="800px"

Height="800px" Title="Current Road Conditions" Behaviors="Default">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<h3>Authority Meetings</h3>

<asp:LinkButton ID="lnkBtnNew" runat="server" class="btn btn-success" OnClick="lnkBtnNew_Click" CausesValidation="False"><i class="icon-plus-sign icon-white"></i> Add New</asp:LinkButton>

<asp:LinkButton ID="lnkBtnShowMeetings" runat="server" CssClass="btn btn-success" OnClick="lnkBtnShowMeetings_Click" CausesValidation="False"><i class="icon-plus-sign icon-white"></i> View Page</asp:LinkButton>

<asp:Button ID="btnHidden" runat="server" Style="display: none" />

<ajax:ModalPopupExtender ID="mpeMeeting" runat="server" PopupControlID="MeetingPanel"

DynamicServicePath="" Enabled="True" TargetControlID="btnHidden" BackgroundCssClass="modal-backdrop fade in"/>

<asp:Panel runat="server" ID="MeetingPanel" DefaultButton="btnSubmit" CssClass="rounded-bottom rounded-top"

Style="display: none; border: 1px; border-style: solid; border-color: Gray;

background-color: white; padding: 3px; width:60%;">

<div class="modal-header">

<h3>

<asp:Label ID="lblAddNewMeeting" runat="server" Text="Add a New Meeting"></asp:Label></h3>

</div>

<div class="modal-body form-horizontal">

<asp:TextBox ID="txtMeetingID" runat="server" Visible="false"></asp:TextBox>

<asp:TextBox ID="txtLastUpdateDate" runat="server" Visible="false"></asp:TextBox>

<asp:TextBox ID="txtLastupdateBy" runat="server" Visible="false"></asp:TextBox>

<asp:TextBox ID="txtCreatedDate" runat="server" Visible="false"></asp:TextBox>

<asp:TextBox ID="txtCreatedBy" runat="server" Visible="false"></asp:TextBox>

<fieldset>

<asp:Panel ID="pnlMeetingDate" runat="server">

<legend>

<h6>

Meeting Information:</h6>

</legend>

<div class="control-group">

<asp:Label ID="lblMeetingDate" CssClass="control-label" runat="server" Text="Date/Time: "></asp:Label>

<div class="controls">

<telerik:RadDateTimePicker Skin="MetroTouch" ZIndex="500000" Width="350px" ID="txtMeetingDate" runat="server">

<Calendar ID="Calendar1" runat="server">

<SpecialDays>

<telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Yellow">

</telerik:RadCalendarDay>

</SpecialDays>

</Calendar>

</telerik:RadDateTimePicker>

<asp:RequiredFieldValidator ID="rfvMeetingDate" runat="server" ControlToValidate="txtMeetingDate"

ValidationGroup="grpNewMeeting" ErrorMessage="Both time and date fields must have values.">*</asp:RequiredFieldValidator>

</div>

</asp:Panel>

</fieldset>

<fieldset>

<legend>

<h6>

Add/Edit Meeting Documents:</h6>

</legend>

<asp:Panel ID="pnlDocumentsUpload" runat="server" Visible="false">

<div class="control-group">

<asp:Label ID="lblDocumentType" CssClass="control-label" runat="server" Text="Document Type: "></asp:Label>

<div class="controls">

<asp:DropDownList ID="ddlFileType" OnDataBound="ddlFileType_DataBound" runat="server">

</asp:DropDownList>

</div>

<div class="control-group">

<asp:Label ID="lblSelectFile" CssClass="control-label" runat="server" Text="Select a File: "></asp:Label>

<div class="controls">

<telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" AllowedFileExtensions="pdf"

MultipleFileSelection="Disabled" Width="500px" Skin="Default" MaxFileInputsCount="1"

OnClientValidationFailed="validationFailed" UploadedFilesRendering="BelowFileInput" />

<asp:LinkButton ID="btnUpload2" runat="server" onclick="btnUpload2_Click"

CssClass="btn btn-info btn-mini"><i class="icon-edit icon-white"></i>Upload</asp:LinkButton>

</div>

</asp:Panel>

<div class="control-group">

<asp:Literal ID="litUploadError" runat="server" />

</div>

</fieldset>

<fieldset>

<asp:Panel ID="pnlDocuments" runat="server">

<div class="control-group">

<asp:GridView ID="gvDocuments" CssClass="table table-bordered table-striped" runat="server" AutoGenerateColumns="False"

DataKeyNames="FileID" OnRowCommand="gvDocuments_RowCommand" OnRowCreated="gvDocuments_RowCreated"

OnRowDeleting="gvDocuments_RowDeleting" GridLines="None">

<Columns>

<asp:BoundField DataField="FileID" HeaderText="File ID" InsertVisible="false" ReadOnly="true"

SortExpression="FileID" Visible="false" />

<asp:BoundField DataField="FileName" HeaderText="File Name" SortExpression="FileName"

Visible="false" />

<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />

<asp:BoundField DataField="ConstructionID" HeaderText="ConstructionID" SortExpression="ConstructionID"

Visible="false" />

<asp:BoundField DataField="CreateDate" HeaderText="Created Date" SortExpression="CreateDate" />

<asp:BoundField DataField="UpdateDate" HeaderText="Updated Date" SortExpression="UpdateDate"

Visible="false" />

<asp:TemplateField>

<HeaderTemplate>

Download

</HeaderTemplate>

<ItemTemplate>

<asp:LinkButton ID="imgBtnDownload" runat="server" CommandArgument='<%# Bind("FileID") %>'

CommandName="Download" CssClass="btn btn-info btn-mini"><i class="icon-edit icon-white"></i>View</asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<HeaderTemplate>

Delete

</HeaderTemplate>

<ItemTemplate>

<asp:LinkButton ID="imgBtnDelete" runat="server" CommandArgument='<%# Bind("FileID") %>'

CommandName="Delete" CssClass="btn btn-info btn-mini"><i class="icon-edit icon-white"></i>Delete</asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</asp:Panel>

</fieldset>

<fieldset>

<asp:Panel ID="pnlMeetingComments" runat="server">

<legend>

<h6>

Meeting Comments:

</h6>

</legend>

<div class="control-group">

<asp:Label ID="lblComments" runat="server" CssClass="control-label" Text="Meeting Comments: "></asp:Label>

<div class="controls">

<telerik:RadEditor ID="txtComments" runat="server" Width="80%" Height="250px" EnableResize="false" SkinID="DefaultSetOfTools"

ResolvedRenderMode="Classic">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="ConvertToUpper" />

<telerik:EditorTool Name="ConvertToLower" />

<telerik:EditorTool Name="Zoom" />

<telerik:EditorTool Name="FindAndReplace" />

<telerik:EditorTool Name="Print" />

<telerik:EditorTool Name="PasteStrip" />

<telerik:EditorTool Name="PasteFromWord" />

<telerik:EditorTool Name="PaseFromWordNoFontsNoSizes" />

<telerik:EditorTool Name="PastePlainText" />

<telerik:EditorTool Name="PasteHtml" />

<telerik:EditorTool Name="PasteAsHtml" />

<telerik:EditorTool Name="Undo" />

<telerik:EditorTool Name="Redo" />

<telerik:EditorTool Name="FormatStripper" />

<telerik:EditorTool Name="InsertParagraph" />

<telerik:EditorTool Name="FormatBlock" />

<telerik:EditorTool Name="Indent" />

<telerik:EditorTool Name="Outdent" />

<telerik:EditorTool Name="JustifyLeft" />

<telerik:EditorTool Name="JustifyCenter" />

<telerik:EditorTool Name="JustifyRight" />

<telerik:EditorTool Name="JustifyFull" />

<telerik:EditorTool Name="JustifyNone" />

<telerik:EditorTool Name="InsertUnorderedList" />

<telerik:EditorTool Name="InsertOrderedList" />

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="Underline" />

<telerik:EditorTool Name="StrikeThrough" />

<telerik:EditorTool Name="FontName" />

<telerik:EditorTool Name="RealFontSize" />

<telerik:EditorTool Name="ForeColor" />

<telerik:EditorTool Name="BackColor" />

<telerik:EditorTool Name="LinkManager" ShortCut="CTRL+K" />

</telerik:EditorToolGroup>

</Tools>

<Modules>

<telerik:EditorModule Name="RadEditorStatistics" Visible="false" Enabled="true">

</telerik:EditorModule>

<telerik:EditorModule Name="RadEditorDomInspector" Visible="false" Enabled="true">

</telerik:EditorModule>

<telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" Enabled="true">

</telerik:EditorModule>

<telerik:EditorModule Name="RadEditorHtmlInspector" Visible="false" Enabled="true">

</telerik:EditorModule>

</Modules>

</telerik:RadEditor>

</div>

</asp:Panel>

</fieldset>

<fieldset>

<asp:Panel ID="pnlStatus" runat="server">

<legend>

<h6>

Status</h6>

</legend>

<div class="control-group">

<asp:Label ID="lblStatus" CssClass="control-label" runat="server" Text="Active: "

ToolTip="If you select active this meeting will be displayed on the main web page"></asp:Label>

<div class="controls">

<asp:DropDownList ID="ddlStatus" runat="server">

</asp:DropDownList>

</div>

<div class="control-group" style="display: none">

<asp:Label ID="lblVersion" CssClass="control-label" runat="server" Text="Version: "></asp:Label>

<div class="controls">

<asp:TextBox ID="txtVersion" runat="server" ReadOnly="true"></asp:TextBox>

<asp:RegularExpressionValidator ID="revVersion" runat="server" ErrorMessage="* Please enter a valid time."

Display="Dynamic" ControlToValidate="txtVersion" ValidationExpression="^[0-9]*$">

</asp:RegularExpressionValidator>

</div>

</asp:Panel>

</fieldset>

</div>

<div class="modal-footer">

<div class="control-group">

<div class="controls">

<asp:ValidationSummary ID="vsgrpNewConstruction" DisplayMode="List" CssClass="alert alert-error" ValidationGroup="grpNewMeeting" runat="server" ForeColor="Maroon" />

<asp:Label ID="litSubmitError" Visible="false" runat="server" ForeColor="Maroon"></asp:Label>

</div>

<asp:Button ID="btnSaveAddDocuments" CssClass="btn btn-primary" runat="server" ValidationGroup="grpNewMeeting" Text="Add Documents"

CausesValidation="false" OnClick="btnSaveAddDocuments_Click" />

<asp:Button ID="btnSubmit" CssClass="btn btn-primary" runat="server" ValidationGroup="grpNewMeeting" Text="Save"

CausesValidation="false" OnClick="btnSubmit_Click" />

<asp:Button ID="btnCancel" CssClass="btn" runat="server" Text="Cancel" CausesValidation="false"

OnClick="btnCancel_Click" />

</div>

</asp:Panel>

<div class="row">

<div class="span12">

<div class="control-group">

<div class="controls">

<asp:Literal ID="litStatus" runat="server" />

</div>

<div class="span12">

<telerik:RadGrid ID="gvMeetings2" runat="server"

AllowPaging="True"

AllowSorting="true"

AutoGenerateColumns="False" ResolvedRenderMode="Classic"

onneeddatasource="gvMeetings2_NeedDataSource">

<SortingSettings EnableSkinSortStyles="false"></SortingSettings>

<GroupingSettings CaseSensitive="false" />

<MasterTableView>

<PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="True"></PagerStyle>

<Columns>

<telerik:GridTemplateColumn>

<HeaderTemplate>

Edit

</HeaderTemplate>

<ItemTemplate>

<asp:LinkButton ID="imgBtnEdit" runat="server" CssClass="btn btn-info btn-mini"

CommandArgument='<%# Bind("MeetingID") %>' OnClick="imgBtnEdit_Click" ><i class="icon-edit icon-white">

</i> View & Edit</asp:LinkButton>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="MeetingDate"

FilterControlAltText="Filter MeetingDate column" HeaderText="Scheduled On"

UniqueName="MeetingDate">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Comments"

FilterControlAltText="Filter Comments column" HeaderText="Comments"

UniqueName="companyname">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastUpdateDate"

FilterControlAltText="Filter LastUpdateDate column" HeaderText="Updated On"

UniqueName="LastUpdateDate">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastUpdateBy"

FilterControlAltText="Filter LastUpdateBy column" HeaderText="Edited By"

UniqueName="LastUpdateBy">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CreatedBy"

FilterControlAltText="Filter CreatedBy column" HeaderText="Created By"

UniqueName="CreatedBy">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CreatedDate"

FilterControlAltText="Filter CreatedDate column" HeaderText="Created"

UniqueName="CreatedDate">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Version" Visible="false"

FilterControlAltText="Filter Version column" HeaderText="Version"

UniqueName="Version">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="StatusDescription"

FilterControlAltText="Filter StatusDescription column" HeaderText="Status"

UniqueName="StatusDescription">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<EditItemStyle BorderWidth="5px" />

</telerik:RadGrid>

<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">

<ProgressTemplate>

<div class="progress progress-striped active">

<div class="bar" style="width: 100%;"></div>

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</div>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

UploadValidation.js

(function () {

var $;

var demo = window.demo = window.demo || {};

demo.initialize = function () {

$ = $telerik.$;

};

window.validationFailed = function (RadAsyncUpload, args) {

var $row = $(args.get_row());

var erorMessage = getErrorMessage(RadAsyncUpload, args);

var span = createError(erorMessage);

$row.addClass("ruError");

$row.append(span);

}

function getErrorMessage(sender, args) {

var fileExtention = args.get_fileName().substring(args.get_fileName().lastIndexOf('.') + 1, args.get_fileName().length);

if (args.get_fileName().lastIndexOf('.') != -1) {//this checks if the extension is correct

if (sender.get_allowedFileExtensions().indexOf(fileExtention) == -1) {

return ("This file type is not supported.");

}

else {

return ("This file exceeds the maximum allowed size of 500 KB.");

}

else {

return ("not correct extension.");

}

function createError(erorMessage) {

var input = '<span class="ruErrorMessage">' + erorMessage + ' </span>';

return input;

}

})();

2 Answers, 1 is accepted

answered on 22 Oct 2015, 06:30 PM

Nevermind. I got it to work. I used the following javascript instead of the UploadValidation.js.

function OnClientValidationFailed(sender, args) {

var fileExtention = args.get_fileName().substring(args.get_fileName().lastIndexOf('.') + 1, args.get_fileName().length);

if (args.get_fileName().lastIndexOf('.')!=-1) {//this checks if the extension is correct

if (sender.get_allowedFileExtensions().indexOf(fileExtention)==-1) {

alert("Wrong Extension!");

}

else {

alert("Wrong file size!");

}

else {

alert("not correct extension!");

}