HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS : The Official Microsoft ASP.NET Forums

Reply

Smadhu

Member

510 Points

HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Mar 29, 2012 06:01 AM|LINK

i m using validate.js
and i have 8 upload buttons
but with validate function i m only able to validate only 1 upload, i want each upload has only n only 1 image how can i do dat.below is the code i m using but its only validating 1 upload box
script code :

$("#ctl00_InnerContent_Add").click(function () {
var validator = $("#ctl00_InnerContent_UploadClientSec").validate({
                    rules: {
                        file: {
                            required: true
                        }
                    },
                    messages: {
                        file: "Upload-Thumbnail1"
                    }
                });
  });

my asp code
<div id="UploadClientSec" runat="server" visible="true">

                <asp:Label ID="lblThumbnail1" class="lbl" runat="server" Text="First Thumbnail Heading"></asp:Label>
                <asp:TextBox ID="txbThumbnail1" class="txtbox" runat="server" MaxLength="50"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RFVThumbnail1" runat="server" ControlToValidate="txbThumbnail1"
                    SetFocusOnError="true" ErrorMessage="Please Enter Thumbnail Heading1."></asp:RequiredFieldValidator>
                <div id="Upload-Thumbnail1">
                    <noscript>
                        <p>
                            Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>
                </div>
                <asp:Label ID="lblThumbnail2" runat="server" Text="Second Thumbnail Heading" class="lbl"></asp:Label>
                <asp:TextBox ID="txbThumbnail2" class="txtbox" runat="server" MaxLength="50"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RFVThumbnail2" runat="server" ControlToValidate="txbThumbnail2"
                    SetFocusOnError="true" ErrorMessage="Please Enter Thumbnail Heading2."></asp:RequiredFieldValidator>
                <div id="Upload-Thumbnail2">
                    <noscript>
                        <p>
                            Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>
                </div>
                <asp:Label ID="lblThumbnail3" runat="server" Text="Third Thumbnail Heading" class="lbl"></asp:Label>
                <asp:TextBox ID="txbThumbnail3" class="txtbox" runat="server" MaxLength="50"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RFVThumbnail3" runat="server" ControlToValidate="txbThumbnail3"
                    SetFocusOnError="true" ErrorMessage="Please Enter Thumbnail Heading3."></asp:RequiredFieldValidator>
                <div id="Upload-Thumbnail3">
                    <noscript>
                        <p>
                            Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>
                </div>
                <script type="text/javascript">
                    function createUploader() {
                        var uploader = new qq.FileUploader({
                            element: document.getElementById('Upload-Thumbnail1'),
                            action: 'FileUploadNewPage.ashx?id=Thumbnail1',
                            debug: true
                        });
                        var uploader = new qq.FileUploader({
                            element: document.getElementById('Upload-Thumbnail2'),
                            action: 'FileUploadNewPage.ashx?id=Thumbnail2',
                            debug: true
                        });
                        var uploader = new qq.FileUploader({
                            element: document.getElementById('Upload-Thumbnail3'),
                            action: 'FileUploadNewPage.ashx?id=Thumbnail3',
                            debug: true
                        });


                    }

                
                    window.onload = createUploader;
                </script>
                 
            </div>
my script code only validates 1st upload but i want to validate all upload buttons
jquery i m using
/**
* jQuery Validation Plugin 1.9.0
*
* http://bassistance.de/jquery-plugins/jquery-plugin-validation/
* http://docs.jquery.com/Plugins/Validation
*
* Copyright (c) 2006 - 2011 JÃ¶rn Zaefferer
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*/

Edited by XIII on Mar 29, 2012 07:01 AM

Reply

Allen Li - M...

Star

10411 Points

1196 Posts

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Mar 30, 2012 07:32 AM|LINK

Hi, please change the following codes:

$("#ctl00_InnerContent_Add").click(function () {
var validator = $("#ctl00_InnerContent_UploadClientSec").validate({
                    rules: {
                        file: {
                            required: true
                        }
                    },
                    messages: {
                        file: "Upload-Thumbnail1"
                    }
                });
  });

as:

$(function () {
            $("#ctl00_InnerContent_UploadClientSec").validate({
                rules: {
                    file: {
                        required: true
                    }
                },
                messages: {
                    file: "Upload-Thumbnail1"
                }
            });
        });

Then please check the result again. Additionally, you can refer to the demos on the following site:

http://jquery.bassistance.de/validate/demo/

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Reply

Smadhu

Member

510 Points

989 Posts

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Apr 01, 2012 05:14 AM|LINK

I have made changes as suggested by you but still only validating 1 upload

Plz do help me with the code

how do i validate them all??

i think i have to use add n remove function after validating 1 upload i should remove validate frm dere n validate to next upload..........but i really dont knw

plz guys do help me out

Edited by Smadhu on Apr 01, 2012 05:38 AM

Reply

Smadhu

Member

510 Points

989 Posts

How to validate fileupload using validate.js

Apr 01, 2012 06:27 AM|LINK

i m using validate.js
and i have 8 upload buttons
but with validate function i m only able to validate only 1 upload, i want each upload has only n only 1 image how can i do dat.below is the code i m using but its only validating 1 upload box script code :

$("#ctl00_InnerContent_Add").click(function () {
var validator = $("#ctl00_InnerContent_UploadClientSec").validate({
                    rules: {
                        file: {
                            required: true
                        }
                    },
                    messages: {
                        file: "Upload-Thumbnail1"
                    }
                });
  });

my asp code
<div id="UploadClientSec" runat="server" visible="true">

                <asp:Label ID="lblThumbnail1" class="lbl" runat="server" Text="First Thumbnail Heading"></asp:Label>
                <asp:TextBox ID="txbThumbnail1" class="txtbox" runat="server" MaxLength="50"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RFVThumbnail1" runat="server" ControlToValidate="txbThumbnail1"
                    SetFocusOnError="true" ErrorMessage="Please Enter Thumbnail Heading1."></asp:RequiredFieldValidator>
                <div id="Upload-Thumbnail1">
                    <noscript>
                        <p>
                            Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>
                </div>
                <asp:Label ID="lblThumbnail2" runat="server" Text="Second Thumbnail Heading" class="lbl"></asp:Label>
                <asp:TextBox ID="txbThumbnail2" class="txtbox" runat="server" MaxLength="50"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RFVThumbnail2" runat="server" ControlToValidate="txbThumbnail2"
                    SetFocusOnError="true" ErrorMessage="Please Enter Thumbnail Heading2."></asp:RequiredFieldValidator>
                <div id="Upload-Thumbnail2">
                    <noscript>
                        <p>
                            Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>
                </div>
                <asp:Label ID="lblThumbnail3" runat="server" Text="Third Thumbnail Heading" class="lbl"></asp:Label>
                <asp:TextBox ID="txbThumbnail3" class="txtbox" runat="server" MaxLength="50"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RFVThumbnail3" runat="server" ControlToValidate="txbThumbnail3"
                    SetFocusOnError="true" ErrorMessage="Please Enter Thumbnail Heading3."></asp:RequiredFieldValidator>
                <div id="Upload-Thumbnail3">
                    <noscript>
                        <p>
                            Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>
                </div>
                <script type="text/javascript">
                    function createUploader() {
                        var uploader = new qq.FileUploader({
                            element: document.getElementById('Upload-Thumbnail1'),
                            action: 'FileUploadNewPage.ashx?id=Thumbnail1',
                            debug: true
                        });
                        var uploader = new qq.FileUploader({
                            element: document.getElementById('Upload-Thumbnail2'),
                            action: 'FileUploadNewPage.ashx?id=Thumbnail2',
                            debug: true
                        });
                        var uploader = new qq.FileUploader({
                            element: document.getElementById('Upload-Thumbnail3'),
                            action: 'FileUploadNewPage.ashx?id=Thumbnail3',
                            debug: true
                        });


                    }

                
                    window.onload = createUploader;
                </script>
                 
            </div>

my script code only validates 1st upload but i want to validate all upload buttons jquery i m using

/**
* jQuery Validation Plugin 1.9.0
*
* http://bassistance.de/jquery-plugins/jquery-plugin-validation/
* http://docs.jquery.com/Plugins/Validation
*
* Copyright (c) 2006 - 2011 J&Atilde;&para;rn Zaefferer
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*/

Edited by Smadhu on Apr 01, 2012 06:28 AM
Edited by XIII on Apr 01, 2012 01:52 PM

Reply

FightAsABull

Contributor

2228 Points

424 Posts

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Apr 02, 2012 06:59 AM|LINK

Hi, please try jQuery validation plugin:

http://docs.jquery.com/Plugins/Validation

Reply

Smadhu

Member

510 Points

989 Posts

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Apr 02, 2012 08:52 AM|LINK

i m little bit confused ...........how to use it...........but i think i ahve to use add and removes rules

But i have tired dat also still i m not able to validate each upload??

Plz Help me out to solve it

thnx

Reply

Allen Li - M...

Star

10411 Points

1196 Posts

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Apr 03, 2012 05:38 AM|LINK

Hi, please try to add

CssClass="required"

attribute to your Textbox, for example:

   <asp:TextBox ID="txbThumbnail1" class="txtbox" runat="server" MaxLength="50" CssClass="required"></asp:TextBox>

And then, add the following method to your markup to validate your form:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript">
        $(function () {
            var validator = $("#formID").validate({
                rules: {
                    file: {
                        required: true
                    }
                }
            });
        });
    </script>

Please check the following example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript">
        $(function () {
            var validator = $("#form1").validate({
                rules: {
                    file: {
                        required: true
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="txbThumbnail1" class="txtbox" runat="server" MaxLength="50" CssClass="required"></asp:TextBox>
    <asp:TextBox ID="txbThumbnail2" class="txtbox" runat="server" MaxLength="50" CssClass="required"></asp:TextBox>
    <asp:TextBox ID="txbThumbnail3" class="txtbox" runat="server" MaxLength="50" CssClass="required"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Reply

Smadhu

Member

510 Points

989 Posts

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Apr 03, 2012 07:58 AM|LINK

i added class requied in my each upload but still its not validating my all uploads.

I dont knw why its not working................ bcoz i have 8 upload buttons n i have to validate dem all.........

Thnx for the help

Reply

Allen Li - M...

Star

10411 Points

1196 Posts

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Apr 05, 2012 02:30 AM|LINK

Hi, since you would like to validate all uploads with every button click event, why did you add eight buttons, you can leave only one button. For example, you can use ASP.NET FileUpload control with RequiredFieldValidator, for example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:FileUpload ID="FileUpload1" runat="server" /><asp:RequiredFieldValidator ID="RequiredFieldValidator1"
        runat="server" ErrorMessage="RequiredFieldValidator"
        ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
    <asp:FileUpload ID="FileUpload2"
        runat="server" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
            ErrorMessage="RequiredFieldValidator" ControlToValidate="FileUpload2"></asp:RequiredFieldValidator>
        <asp:FileUpload ID="FileUpload3" runat="server" /><asp:RequiredFieldValidator ID="RequiredFieldValidator3"
            runat="server" ErrorMessage="RequiredFieldValidator"
        ControlToValidate="FileUpload3"></asp:RequiredFieldValidator>
        <asp:FileUpload
            ID="FileUpload4" runat="server" /><asp:RequiredFieldValidator ID="RequiredFieldValidator4"
                runat="server" ErrorMessage="RequiredFieldValidator"
        ControlToValidate="FileUpload4"></asp:RequiredFieldValidator>
            <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Marked as answer by Ming Xu - MSFT on Apr 09, 2012 02:58 PM

HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS RSS

8 replies

Smadhu

HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Allen Li - M...

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Smadhu

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Smadhu

How to validate fileupload using validate.js

FightAsABull

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Smadhu

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Allen Li - M...

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Smadhu

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

Allen Li - M...

Re: HOW TO VALIDATE EACH UPLOAD USING VALIDATE.JS

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft