SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    W3C Validation - can someone tell me what I need to fix to validate my contact form?

    W3C Validation - can someone tell me what I need to get my contact form to validate? Obviously it tells me were the errors are - but I don't know what I should do to fix them. The CSS is perfect - it's just the html that does not validate. Thanks!

    Here is the page http://www.littleaboutalot.com/contact.php

    Here are the errors http://validator.w3.org/check?verbos...%2Fcontact.php

    And here is the code

    <form method="post" action="formmail.php" onsubmit="return checkform(this);">
    <label for="name">Name</label>
    <input type="text" maxlength="30" id="name" name="name" class="iehover">
    <br>
    <label for="email">Email</label>
    <input type="text" maxlength="50" id="email" name="email" class="iehover">
    <br>
    <label for="subject">Subject</label>
    <input type="text" maxlength="50" id="subject" name="subject" class="iehover">
    <br>
    <label for="comments">Comments</label>
    <textarea id="comments" name="comments" class="iehover"></textarea>
    <br>
    <input type="submit" name="submit" value="Submit" class="submit iesubmithover">
    </form>

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1.
    Change:
    Code:
    <script language="JavaScript" type="text/javascript">
    To:
    Code:
    <script type="text/javascript">
    2.
    Completely rebuild your actual form, copying and experimenting with the XHTML/CSS from somewhere like here.

    3.
    Job done
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Alec says, change the javascript link and then add fieldset and legend to your form to get it to validate (you then style them however you want via CSS).

    Code:
    <form method="post" action="formmail.php" onsubmit="return checkform(this);">
    <fieldset>
      <legend>Contact Form</legend>
        <label for="name">Name</label>
        <input type="text" maxlength="30" id="name" name="name" class="iehover">
        <br>
        <label for="email">Email</label>
        <input type="text" maxlength="50" id="email" name="email" class="iehover">
        <br>
        <label for="subject">Subject</label>
        <input type="text" maxlength="50" id="subject" name="subject" class="iehover">
        <br>
        <label for="comments">Comments</label>
        <textarea id="comments" name="comments" rows="6" cols="38" class="iehover"></textarea>
        <br>
        <input type="submit" name="submit" value="Submit" class="submit iesubmithover">
     </fieldset>
    </form>
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    OK, looks like that does it - thanks! One problem though - when I add <legend>Contact Form</legend> it adds the text to the top of my form. Can you see why that would do that. I'm sure I am just missing a closing tag or something - but I can't find the problem? Thanks!

    <form method="post" action="formmail.php" onsubmit="return checkform(this);">
    <fieldset>
    <legend>Contact Form</legend>
    <label for="name">Name</label>
    <input type="text" maxlength="30" id="name" name="name" class="iehover">
    <br>
    <label for="email">Email</label>
    <input type="text" maxlength="50" id="email" name="email" class="iehover">
    <br>
    <label for="subject">Subject</label>
    <input type="text" maxlength="50" id="subject" name="subject" class="iehover">
    <br>
    <label for="comments">Comments</label>
    <textarea id="comments" name="comments" class="iehover"></textarea>
    <br>
    <input type="submit" name="submit" value="Submit" class="submit iesubmithover">
    </fieldset>
    </form>

  5. #5
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean it adds the text to the top of the form? That's what it's there for, as it explains here.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    OK - my bad. Do I need legend to validate? I don't want the text there so should I just go <legend></legend> like that?

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Unrelated - but I'm sure you know the answer. If you have two different js scripts in the head of your dock - do you use two js script blocks or one?

    <script type="text/javascript"></script>

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The legend text is required. If you don't want it for your layout, just position it off-screen, like so:

    Code CSS:
    /*
    	Note from Dan Schulz: #formid is just a placeholder for an ID that would go on the form;
    	for example if the ID on the form is search-form, the selector would be #search-form
    */
     
    #formid legend {
    	position: absolute;
    	left: -999em;
    }

    It will require adding an ID to the form element, but I prefer adding them anyway since I can then use CSS to target specific parts of specific forms.

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or if you don't want to have a legend you can leave it out and just replace the fieldset with a div.

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    That's what I do when there's already something else stating what the legend would say. Don't need the form to sound like Forrest Forrest Gump. I've certainly added my fair share of bs text to satisfy a legend-- usually "Fill In" which, if you don't know you're supposed to fill a form in, you shouldn't be on the page in the first place.

    The validator looks for a block element directly within the form. So usually the Fieldset does that. Apparently, an inline (like a label) cannot be a direct child of form. But with XHTML, fieldset requires a legend. So if you cannot have a legend for whatever reason, and don't want to hide one, then another block element will satisfy the validator's needs.

  11. #11
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The legend should be included yes, but it isn't necessarily always needed to make a form validate.

    Two different JavaScripts? Yes, just use two like this:
    Code:
    <script type="text/javascript" src="js/script-1.js"></script>
    <script type="text/javascript" src="js/script-2.js"></script>
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks a lot guys! Extremely helpful! I went with the div for the time being. But in the future when I add a blog, therefore another form, I may need the form ID in which case I'll use your method Dan.

    OK... now I am down to 2 errors. Here is what the validator said. How should I remedy these? Thanks guys!
    http://validator.w3.org/check?verbos...%2Fcontact.php

    And here is my code

    <form method="post" action="formmail.php" onsubmit="return checkform(this);">
    <div>
    <label for="name">Name</label>
    <input type="text" maxlength="30" id="name" name="name" class="iehover">
    <br>
    <label for="email">Email</label>
    <input type="text" maxlength="50" id="email" name="email" class="iehover">
    <br>
    <label for="subject">Subject</label>
    <input type="text" maxlength="50" id="subject" name="subject" class="iehover">
    <br>
    <label for="comments">Comments</label>
    <textarea id="comments" name="comments" class="iehover" onKeyPress="limitText(this,500);"></textarea>
    <br>
    <input type="submit" name="submit" value="Submit" class="submit iesubmithover">
    </div>
    </form>

  13. #13
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    textarea needs a row and a cols attribute (these are required, though you can change these settings then with css):

    Code:
    <textarea id="comments" name="comments" class="iehover" onKeyPress="limitText(this,500);" cols="50" rows="3"></textarea>
    Edit: I see now that you've found out yourself, well done!
    Dan G
    Marketing Strategist & Consultant

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Never mind, I should try fixing it before I ask I guess. rows="1" cols="1" in the textarea did the job. Thanks a lot guys, have a good one!

    Edit - just crossed each other - any harm in putting rows="1" cols="1" instead of your example?

  15. #15
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe for those that have css disabled.

    50/3 is my default setting for textareas.
    Dan G
    Marketing Strategist & Consultant


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
  •