Client side validation is failing

3 posts, 0 answers
  1. Shannon
    Shannon avatar
    6 posts
    Member since:
    Sep 2013

    Posted 20 Oct 2015 Link to this post

    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>
                                </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>
                                <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>
                                </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>
                                </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>
                                <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>
                                </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>
                        </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>
                    </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>               
                </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. Shannon
    Shannon avatar
    6 posts
    Member since:
    Sep 2013

    Posted 22 Oct 2015 Link to this post

    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!");
        }
    }

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 23 Oct 2015 Link to this post

    Hello,

    Yes, as you have found the OnClientValidationFailed event is the right one to use as it allows to handle a failed validation based on file size or extension.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top