Results 1 to 9 of 9

Thread: Simple JavaScript help -- validating a text box

  1. #1
    Join Date
    Aug 2008
    Location
    USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Simple JavaScript help -- validating a text box

    Okay, so I've searched and searched. I've Googled until I can't Google anymore. I've tried code that was supposed to work and didn't. All I'm trying to do is validate a that a file input HTML control has text in it before the user can click to add another file. It's a cascading input control using JavaScript that I created following a video tutorial on www.asp.net. The guy didn't put any validation on the control so you can add more controls to your heart's content even if they're blank.

    Here's my JS:

    Code:
            <script type="text/javascript">
                function AddFileUploadBox()
                {
                    if (!document.getElementById || !document.createElement)
                        return false;
                        
                    var UploadArea = document.getElementById("SuppFileUpload");
                    if (!UploadArea)
                        return;
                        
                    
                    
                    var Paragraph = document.createElement("p");
                    UploadArea.appendChild(Paragraph);
                    
                    var NewUploadBox = document.createElement("input");
                    NewUploadBox.type = "file";
                    NewUploadBox.size = "100";
                    
                    if (!AddFileUploadBox.lastAssignedId)
                        AddFileUploadBox.lastAssignedId = 100;
                        
                    NewUploadBox.setAttribute("id", "Supp_FileUpload" + AddFileUploadBox.lastAssignedId);
                    NewUploadBox.setAttribute("name", "Supp_FileUpload" + AddFileUploadBox.lastAssignedId);
                    
                    UploadArea.appendChild(NewUploadBox);
                    
                    AddFileUploadBox.lastAssignedId++;
                }
            </script>
    It works great. I'm just trying to validate that the input controls have something in them before I add another input control via JS.

    If I do an alert based on the control, it just says "[object]" in the message box. Basically, regardless of what text is in the input box, it always thinks it's null.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    To test an input's value string, use that (the value property of the input). Testing the input itself will always return an object.

    I'm not wild about parts of the rest of the code, but I'm not going to worry about that right now. And you didn't supply example markup, so I had to create my own. I gave the existing file input an id number of 100, so it could be checked, and so had to move the parts about creating and incrementing the id number to earlier in the code. Try this out:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <script type="text/javascript">
                function AddFileUploadBox()
                {
                    if (!document.getElementById || !document.createElement)
                        return false;
                        
                    var UploadArea = document.getElementById("SuppFileUpload");
                    if (!UploadArea)
                        return;
                    if (!AddFileUploadBox.lastAssignedId)
                        AddFileUploadBox.lastAssignedId = 100;
    
                    if(document.getElementById('Supp_FileUpload' + AddFileUploadBox.lastAssignedId).value == '')
                    return;
                    AddFileUploadBox.lastAssignedId++;
                        
                    
                    
                    var Paragraph = document.createElement("p");
                    UploadArea.appendChild(Paragraph);
                    
                    var NewUploadBox = document.createElement("input");
                    NewUploadBox.type = "file";
                    NewUploadBox.size = "100";
                    
                        
                    NewUploadBox.setAttribute("id", "Supp_FileUpload" + AddFileUploadBox.lastAssignedId);
                    NewUploadBox.setAttribute("name", "Supp_FileUpload" + AddFileUploadBox.lastAssignedId);
                    
                    UploadArea.appendChild(NewUploadBox);
                    
                }
            </script>
    </head>
    <body>
    <form id="SuppFileUpload" action="#">
    <input type="button" value="Add Box" onclick="AddFileUploadBox();"><br>
    <input id="Supp_FileUpload100" name="Supp_FileUpload100" type="file">
    </form>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2008
    Location
    USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Sorry about providing any markup. My JavaScript is on a MasterPage in Visual Studio so there's not really any markup for it. I guess I could create another project for the purpose of testing this but I didn't think about it.

    Anyway, I tried your code and it threw an error. "Object Required" is all it says.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Works fine here. Copy the entire code and save it as a separate .htm page using a text only editor like NotePad, load it into the browser, try it out.

    That's the problem with not supplying any markup, no way to tell how code written for one sort of markup will react with another sort. However, you should be able to adapt your markup to what the code expects, or the other way around, or a bit of both:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2008
    Location
    USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I'll work on your recommendation and troubleshoot it in Notepad. I can't provide a link. It's not a live site and even if it was, it's an internal site at the company I work for.

    Here's some of the markup, though.

    How I call the function:
    Code:
    <input id="Add_Button" type="button" value="Add File" style="right: inherit;" onclick="AddFileUploadBox()" />
    The input getting checked and duplicated:
    Code:
    <p id="SuppFileUpload">
                                    <input id="Supp_FileUpload" type="file" runat="server" size="100" name="Supp_FileUpload" />
                                </p>

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    As I mentioned, this (the initial input on the page):

    Code:
    <input id="Supp_FileUpload" type="file" runat="server" size="100" name="Supp_FileUpload" />
    should be:

    Code:
    <input id="Supp_FileUpload100" type="file" runat="server" size="100" name="Supp_FileUpload100" />
    There could be other problems.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2008
    Location
    USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I found the issue. For whatever reason, and maybe you can explain this, it doesn't like the runat="server" attribute on the input.

    Code:
    <input id="Supp_FileUpload100" name="Supp_FileUpload100" type="file" size="100" runat="server" />
    vs

    Code:
    <input id="Supp_FileUpload100" name="Supp_FileUpload100" type="file" size="100" />
    But Visual Studio automatically places the runat="server" on everything.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I didn't even notice that and probably wouldn't have been certain it would be a problem. I imagine that with runat="server", you need a server that will accept the output from the element in question. If you are just testing locally, or on a server that isn't setup to accept input from that element, probably even on a server properly setup, it would likely cause problems with the client side script because the browser will not receive any output from that element, it is all directed at the server.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Myriad_Rocker (08-12-2008)

  10. #9
    Join Date
    Aug 2008
    Location
    USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Gotcha. Thanks very much your help. I'm a beginner at this JavaScript thing.

    I actually just changed up the JavaScript a bit. So I could re-use it again if I needed to, I passed the name of the controls to the function as variables.

    Thanks again.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •