Validating eForm as XHTML Strict

Once again the caveat being that I’m learning all this web coding business as I go along, so go easy on me

I’m trying to get my contact form to work. I’m very new to forms. When I validate at W3C It tells me that there are 0 errors (yes 0, not a typo) but that my page doesn’t validate. Here’s what it says.

Line 72 column 26: reference to non-existent ID "vericode".

<label accesskey="c" for="vericode">code

This error can be triggered by:

* A non-existent input, select or textarea element
* A missing id attribute
* A typographical error in the id attribute

Try to check the spelling and case of the id you are referring to.

How important is this part of the code? I’ve had to try all sorts of things to get it to validate that far. Can anyone give me any hints as to how to write a totally XHTML 1 Strict form with Eform? The rest of my site validates perfectly apart from this.

The code for my actual form, at the moment is as follows;

<div class="contactcontainer">
<div class="error">[+validationmessage+]</div>
<form method="post" action="[~[*id*]~]" id="ContactForm">
<fieldset class="contactform">
<h3> Please fill out the form below to contact us.</h3>

<input name="formid" type="hidden" value="ContactForm" />

<label class="contactform" for="cfName">Your name:

<input name="name" id="cfName" class="text" type="text" size="40" maxlength="40" eform="Your Name::1:" />
</label>

<label class="contactform" accesskey="e" for="cfEmail">Your Email Address:

<input name="email" id="cfEmail" class="text" type="text" size="40" maxlength="40" eform="Email Address:email:1" />
</label>

<label class="contactform" for="cfRegarding">Regarding:

<input name="subject" id="cfRegarding" class="text" size="40" maxlength="40" type="text" eform="Form Subject::1" />
</label>

<label class="contactform">&nbsp;</label><label class="contactform" for="cfMessage">Message:

<textarea cols="63" rows="10" name="message" id="cfMessage" eform="Message:textarea:1"></textarea>

</label>
Please enter the anti spam code below:

<img src="[+verimageurl+]" alt="verification code" />

<label accesskey="c" for="vericode">code
<input name="vericode" class="text" size="20" />
</label>
<input type="submit" id="cfContact" class="button" value="Send Feedback" />

</fieldset>
</form>
</div>

Also I can get the form working in Firefox, but IE7 gives me a Captcha validation error, and Opera for some reason won’t allow the Name field to be filled in. I’m learning a lot about web design as I go along, but this has completely stumped me!

In the chunk you use to send as a template for your contact form (i.e. &tpl=`Template`), you need to change the above to:

Excellent, many thanks

I’ve made a few other changes and the form is now validating as XHTML strict. My code is now as follows (BTW, how do I make one of those scrollable areas in these forums to past code?)
============
<div class="contactform">
<div class="error">[+validationmessage+]</div>

<form method="post" action="[~[*id*]~]" id="ContactForm">

<fieldset>
<h3> Please fill out the form below to contact us.</h3>

<input name="formid" type="hidden" value="ContactForm" />

<label class="contactform" for="cfName">Your name:

<input name="name" id="cfName" class="text" type="text" size="40" maxlength="40" eform="Your Name::1:" /></label>

<label class="contactform" accesskey="e" for="cfEmail">Your Email Address:

<input name="email" id="cfEmail" class="text" type="text" size="40" maxlength="40" eform="Email Address:email:1" /></label>

<label class="contactform" for="cfRegarding">Regarding:

<input name="subject" id="cfRegarding" class="text" size="40" maxlength="40" type="text" eform="Form Subject::1" /></label>

<label class="contactform">&nbsp;</label><label class="contactform" for="cfMessage">Message:

<textarea cols="63" rows="10" name="message" id="cfMessage" eform="Message:textarea:1"></textarea>
</label>

<div class="clear"><p>Please enter the anti spam code below:</p>
<img src="[+verimageurl+]" alt="verification code" />

<label accesskey="c" for="vericode">code:

<input name="vericode" id="vericode" class="text" size="20" /></label></div>
<div class="clear cpadding"><input type="submit" id="cfContact" class="button" value="Send Feedback" /></div>

</fieldset>
</form>
</div>
================

The form now works in Opera and Firefox. Although I am having troubles with IE7. Although I enter the correct Captcha code it tells me that it is invalid. I have tried clearing out the cache and cookies (even though they are turned off anyway) and it hasn’t made a difference.

Quote from: SimonMW at May 01, 2007, 09:36 AM

Excellent, many thanks

I’ve made a few other changes and the form is now validating as XHTML strict. My code is now as follows (BTW, how do I make one of those scrollable areas in these forums to past code?)

Insert "code" (no quotes) surrounded by brackets, or use the hash mark/pound sign with the BBCode editor that appears after previewing.