SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validating a Form with an Image Submit Button

    I'm using an image submit button for a form and I cannot get it to validate my code. I have read the info at http://artlung.com/lab/scripting/validate_image/ and I still can't get it to work.

    Can somebody please look at my code and tell me what I need to change? I've been trying to figure this out for hours and it is driving me nuts!!!!!!!!!!!!!!!!!!!!
    Code:
    function validateFields(form) {
    var passed = false;
    
    if (form.name.value == "" ) {
    fixElement(form.name, "Please enter your \"Name\"." );
    }
    else if (form.email.value.indexOf("@" ) == -1 ||
    form.email.value.indexOf("." ) == -1) {
    fixElement(form.email, "Please enter a valid \"Email Address\"." );
    }
    else {
    return document.Form.submit();
    }
    }
    function fixElement(element, inquiry) {
    alert(inquiry);
    element.focus();
    }
    
    <form action="" method="post" name="Form" id="Form">
    <a href="java script:validateFields(this)"><img src="images/submit.gif"></a>
    </form>
    Any help would be greatly appreciated.
    Last edited by JohnSaunders; Apr 5, 2003 at 23:03.
    John Saunders

  2. #2
    SitePoint Member
    Join Date
    Apr 2003
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first thing I noticed was you need a > after the following to close the img tag:

    Code:
    <img src="images/submit.gif"
    |

  3. #3
    My precious!!! astericks's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver, BC
    Posts
    1,971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    edit: ooops...image button.

    n/m

  4. #4
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops....forgot to close that tag. I trimmed out some of the actual code I have in my page just so it wouldn't be so klunky in my post.
    John Saunders

  5. #5
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Canada
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JohnSaunders
    Code:
    <form action="" method="post" name="Form" id="Form">
    <a href="java script:validateFields(this)"><img src="images/submit.gif"></a>
    </form>
    Any help would be greatly appreciated.
    JavaScript is one word, not two...try this instead:

    Code:
    <form action="" method="post" name="Form" id="Form">
    <a href="javascript:validateFields(this)"><img src="images/submit.gif"></a>
    </form>
    Jesse
    Moment Studios
    Web Design and Development

  6. #6
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Canada
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JesseI
    JavaScript is one word, not two...try this instead:
    Code:
    <form action="" method="post" name="Form" id="Form">
    <a href="java script:validateFields(this)"><img src="images/submit.gif"></a>
    </form>
    ok....it must be a thing on this forum where it puts the space in automatically...weird...so I guess that isn't the problem.

    What exactly isn't working, is the JavaScript function not being called when you hit the button, or is something inside the function not working?
    Jesse
    Moment Studios
    Web Design and Development

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Use this instead of your current image/link code:
    Code:
    <input type="image" name="submitter" onclick="validateFields(this.form);" />

  8. #8
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I go to click Submit, it says "Java Script Error - Description: 'name.value' is null or not an object.'

    Vinnie,

    I'd use the <input> tag but throughout my entire site I'm using mouseover buttons that change so I'd like to keep things consistent with the rest of my site. I have them working on like 6 other forms but this one is giving me problems becaue I need to use the JavaScript validator.

    Here is the full code that I'm using. I have the name="" inserted in my code, I just deleted it in my original post.

    Code:
    <a href="javascript:validateFields(this)" onmouseover="changeImages('send', 'images/submit_over.gif'); return true;" onmouseout="changeImages('send', 'images/submit.gif'); return true;"><img name="send" src="images/submit.gif" width="45" height="14" alt="Submit" border="0" id="send"></a>
    John Saunders

  9. #9
    Non-Member
    Join Date
    Jan 2003
    Posts
    5,748
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For this why not use the BUTTON tag ?

    Code:
    <button><img /></button>
    Will display an IMAGE - if the BUTTON background shows through then use CSS to hide the BUTTON.

    Then have an OnClick event for the BUTTON to validate/submit your FORM. Would that not work ?

  10. #10
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried what you said but it kept coming up with the same error as above. The only way I can seem to get it to work is by putting it in the onsubmit in the form tag when using an input button.
    John Saunders

  11. #11
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can still do a rollover on an input <input type="image">

    Do that and you can just use onsubmit, which is much better.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  12. #12
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Urbana, MD
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) always use onSubmit in the form, not from a button press (you know, you can usually submit a form by pressing ENTER in a text field anyway...)

    2) Image buttons (without HREF) do not register onclick events in Netscape 4 and old browsers because IMG elements do not.

  13. #13
    Non-Member
    Join Date
    Jan 2003
    Posts
    5,748
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If missing out the HREF works ok in the newer browsers then stick with it - do not worry too much about NS4.x and older browsers.

    Next to nobody - fools maybe - use anything less then <= 5.x nowadays 8)


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
  •