Use of Validation Tab?

Trying out ChronoForms (latest stable release, not beta) and am trying to figure out how validation works.

The description on the Joomla! Extensions page says that validation no longer requires JS code. On the validation tab, it looks as though I should set validation to Yes, choose MooTools (for Joomla 1.5), and enter the names of the fields that need to be validated in the appropriate slots. For example, I have a field called "name" (for the user name, of course) that I enter in the Required slot.

So I do all that and nothing at all happens. For example, I leave the name field blank and no error message is shown; it just goes right through.

I must be misunderstanding something. How is this supposed to work? I could not find a tutorial. I did find various discussions about incorporating JS code in the form to validate, but that isn't what I was hoping for.

Thanks

Hi bmheck,

Your description sounds correct - you are doing all the right things. Here are some things that might cause a problem:
[list]

Your name attribute values are not quoted i.e. you have name=field_name instead of name="field_name"

Using 'name' as a field name may cause a problem as the parsing searches for 'name' to identify tags. Try 'user_name' instead.

You have class attributes in your input tags, the validation adds a new class tag and having two causes problems. The workarounds for this are either to use indirect selectors, or to add the validation classes manually and leave the field boxes on the validation tab empty.

You have spaces or other special characters in your field names

There is a JavaScript conflict with something else on your web page - some modules, menus, etc. load their own JavaScript libraries and having two frameworks loaded often causes problems. You may see a Page Error in the IE status bar, or a more complete error if you use Firebug with Firefox.

[/list] Bob

Bob,

Thank you, there is progress. I made a few changes in the HTML, specifically substituting "member_name" for "name" (names already were quoted.

Now there are messages below the fields when I tab through them. For example, if I tab through the name field (without filling it in), the message "This is a required field" appears below the name field.

But two questions:

1. If I don't tab through the field, no message is sent. That would be OK if something happened when I hit the Submit button, but....
2. I can leave all the required fields blank, hit the submit button, and the form is submitted anyway. In other words, if the user happens to tab through a field and notices the error message and does something about it, fine; but if the user simply clicks on fields and skips one, the error is not caught and the results of the form are sent.

So is there a way to force the user to fill in all required fields using this validation method, i.e., not submit the form until all validation tests are met?

Bill

Hi bmheck,

All I can say without seeing the form is that 'something is wrong'. When validation is correctly set up you cannot submit the form without the required fields having something in them.

Bob

Hi Bob,

Thanks for a very quick reply!

Well, it's a lot closer.

First, I tried switching the validation library to "prototype." That did it. But as it's in Joomla 1.5, I'm curious as to why mootools doesn't work.

I had been running the form in Firefox; I tried it in IE and yes, there is an "error on Page" message at the bottom of the screen. Back in FF, I have Firebug installed and opened it up, but didn't see any error or warning messages during the process when I submitted the form. Then again, it's been a long time since I debugged anything, and I do not have the knowledge or skills to set breakpoints or watches with FB without some reeducation.

However, when I just checked the FF error console, I saw the following:

- When using the "prototype" validation library, there's one error:
$$.shared is undefined
http://...site.../media/system/js/mootools.js Line: 55

- When using the "mootools" validation library, there's the same error as above, followed by a series of identical errors, apparently one for each time it tries to validate something:

$A(options).any is not a function
http://...site.../components/com_chronocontact/js/mooValidation.js Line: 234

So at this point, it's usable -- but I'm still curious about what's going on and if this can -- or should -- be corrected. I don't really know of anything else using JS on this page other than the usual Joomla pages (using ja_purity template with suckerfish drop down menus if that changes anything).

Reply if it makes sense -- if this is too much to pursue, I understand.

I have a couple of different questions for which I'll post a new topic.

Thanks again,
Bill

Hi bmheck,

I just tested the little test form using ja_purity with the horizontal suckerfish menu and validation with MooTools work OK. Do you have anything else installed on there? What does the FireBug script listing show?

Bob

I think this is what you want....nothing looks interesting to me, but what do I know?

[attachment=0]firebugoptions.jpg[/attachment]

Hi bmheck,

Yes thanks - the line that starts eval(function(. . . is showing an error.

Unfortunately it's about as clear as mud to me what the error is - but Max is much more knowledgeable about MooTools so hopefully he can cast some light.

Bob

Hi bmheck,

I just took a look at your form. I don't get any error report but something weird is happening with the radio buttons:

<td><input title="Chickadee" name="membertype" 
class="validate-one-required" 
class="validate-one-required" 
class="validate-one-required" 
class="validate-one-required" 
class="validate-one-required" 
class="validate-one-required"
158 value="chickadee" type="radio"></td>

(line-breaks inserted)
Once would be enough!

Bob

Now that is interesting..... Apparently ChronoForms is inserting the "class=...." parts, presumably because the validation is turned on. And it's probably not coincidental that the "class =...." bit is inserted six times in each input line -- there are six radio buttons. Here's the HTML form code:

<td><input title="Chickadee" name="membertype" value="chickadee" type="radio"></td>

It shouldn't matter, but this is embedded in a table row:

<tr valign="top">
<td><input title="Chickadee" name="membertype"
value="chickadee" type="radio"></td>
<td style="width: 110px;">Chickadee</td>
<td style="width: 33px;">$100</td>
<td>Includes all the .....</td>
</tr>

Let me know if anyone needs to look at the HTML code or anything else about this form.

sure, put here your form code HTML please!

OK, here you go -- pretty much plain vanilla to my mind but maybe there's something of interest:

<span style="font-family: Helvetica,Arial,sans-serif;">Apply
now for joint membership in Columbus Audubon (CA) <em>and</em>
the
Grange Insurance Audubon Center (GIAC). Please select one of the
following
membership levels:
<br>
<br>
<table style="text-align: left; width: 100%;"
cellpadding="2" cellspacing="2">
<tbody>
<tr valign="top">
<td><input value="individual" name="membertype"
type="radio">
</td>
<td style="width: 110px;">Basic Individual</td>
<td style="width: 33px;">$30</td>
<td>Includes membership in GIAC and CA, <i>The
Song Sparrow </i>newsletter (electronic delivery only),
subscription to <i>Audubon </i>magazine, and many other
benefits (see below)</td>
</tr>
<tr valign="top">
<td><input title="Family" name="membertype"
value="family" type="radio">
</td>
<td style="width: 110px;">Basic Family</td>
<td style="width: 33px;">$45</td>
<td>Includes the benefits above plus discounts at the
GIAC Nature Store and on GIAC programs for your entire family
</td>
</tr>
<tr valign="top">
<td><input title="Chickadee" name="membertype"
value="chickadee" type="radio"></td>
<td style="width: 110px;">Chickadee</td>
<td style="width: 33px;">$100</td>
<td>Includes all standard membership benefits plus
enrolls you as a <i>Founding Member</i> of GIAC
plus an Audubon coffee mug</td>
</tr>
<tr valign="top">
<td><input title="Great Blue Heron"
name="membertype" value="heron" type="radio">
</td>
<td style="width: 110px;">Great Blue Heron</td>
<td style="width: 33px;">$250</td>
<td>Includes all of the above plus your choice
of an Audubon cap or tote bag</td>
</tr>
<tr valign="top">
<td><input title="Bald Eagle" name="membertype"
value="eagle" type="radio">
</td>
<td style="width: 110px;">Bald Eagle</td>
<td style="width: 33px;">$500</td>
<td>Includes all of the above plus a copy of the
world-famous <i>Guide to North American Birds</i> by David
Sibley</td>
</tr>
<tr valign="top">
<td><input title="Great Egret"
name="membertype" value="egret" type="radio">
</td>
<td style="width: 110px;">Great Egret</td>
<td style="width: 33px;">$1000</td>
<td>Includes all of the above plus a personalized birding
day in the Columbus area with a guide from Columbus Audubon</td>
</tr>
</tbody>
</table>
 <br>
All members receive<br>
<ul>
<li>Subscription to <i>Audubon</i> magazine</li>
<li>10% discount at the GIAC nature store</li>
<li>Discount on GIAC program fees</li>
<li>Free CA field trips and programs throughout the year</li>
<li>Volunteer opportunities</li>
<li>Invitations to special events at GIAC</li>
<li>Building rental opportunities at GIAC</li>
<li>Bi-monthly <i>Song Sparrow</i>
newsletter, a joint publication of Columbus Audubon and the
Grange Insurance
Audubon Center (electronic delivery only for basic membership)</li>
<li>An invitation to attend the CA annual meeting</li>
<li>Discounts at partnering affiliates</li>
<li>Voice in CA/GIAC conservation initiatives</li>
</ul>
<table style="text-align: left; width: 100%;"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><input name="electronicdelivery"
value="deliverelectronically" type="checkbox">
</td>
<td>I prefer to receive <i>The Song Sparrow</i> by email for faster delivery and to save paper!
<br>
</td>
</tr>
<tr>
<td><input name="magazine"
value="magazinedecline" type="checkbox">
</td>
<td>I prefer not to receive <i>Audubon</i>
magazine.
<br>
</td>
</tr>
<tr>
<td><input name="promotional"
value="promotionaldecline" type="checkbox">
</td>
<td>I prefer not to receive promotional materials from
Audubon.</td>
</tr>
<tr>
<td> <input name="premiums"
value="premiumdecline" type="checkbox">
</td>
<td>I prefer not to receive any premiums; please
put my entire membership contribution to work for Audubon!</td>
</tr>
</tbody>
</table>
<br>
<br>
<table style="text-align: left; width: 100%;"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>Name:</td>
<td colspan="5"><input maxlength="60"
size="40" name="membername"></td>
</tr>
<tr>
<td>Address:</td>
<td colspan="5"><input maxlength="80"
size="40" name="memberaddress"></td>
</tr>
<tr>
<td>City</td>
<td><input maxlength="60" size="25"
name="membercity"></td>
<td>State</td>
<td><input maxlength="2" size="2"
name="memberstate"></td>
<td>ZIP</td>
<td><input maxlength="9" size="9"
name="memberzip"></td>
</tr>
<tr>
<td>Email</td>
<td><input maxlength="50" size="40"
name="memberemail"></td>
<td colspan="4">(required for electronic delivery
of <i>The
Song Sparrow)</i>
</td>
</tr>
</tbody>
</table>
<br>
As an antispam measure, please type the characters that you see to the right of the box.
<br />
{imageverification}
<br>
<button value="submit" name="Submit">Apply for
Membership!</button>
</span>

Hope that helps!
Bill

Good, I can find nothing, please create a new form and add one or 2 fields only, the problem persists ? everytype of field or only radios ?

Hi bmheck,

I wonder if the tables are confusing the validation parser. Here's the note from Andrew Tetlaw's site

*To use the validate-one-required validator you must first add the class name to only one checkbox/radio button in the group (last one is probably best) and then place all the input elements within a parent element, for example a div element. That way the library can find all the checkboxes/radio buttons to check and place the validation advice element at the bottom of the parent element to make it appear after the group of checkboxes/radio buttons.

Try as an experiment putting a few radio buttons inside a single table cell (or a stand-alone div) and see if they validate using validate-one-required.

Bob

OK, I cut the form way down and got rid of the table (see below) and learned a few things:

1. Using Mootools validation still doesn't work: it will let me submit the form without selecting any radio button.
2. Both Mootools and prototype validation still insert multiple copies of 'class="validate-one-required"' into each input tag (n this case I left three input tags, so each one gets three copies of class=....).
3. Using the prototype validation, validation works and puts the verification message below the last radio button, i.e., in the right place. So the table was confusing it. In the original form, I tried wrapping the table in a DIV; that didn't work; it still put the validation message in the first cell of the table. So it appears that tables cannot be used in a form in these circumstances? (That will make formatting the section more challenging....)

I now have a way to make validation work (select prototype, not Mootools) and know how to avoid the validation message in the wrong place (don't use a table for formatting). The extra copies of the "class=...." bit don't seem to hurt anything. So I guess my problem is solved. However, I would be happy to supply more information if you want to track down what's going on for future reference. If so, let me know what else you might need. And if you have any ideas about how I can continue to use tables for formatting, I'd love to hear them.

Thanks!

Here's the simplified HTML:

<style type="text/css">
div.validation-advice {
  color:red;
  font-style:italic;
}
</style>  

<span style="font-family: Helvetica,Arial,sans-serif;">Apply
now for joint membership in Columbus Audubon (CA) <em>and</em>
the
Grange Insurance Audubon Center (GIAC). Please select one of the
following
membership levels:
  <br>
  <br>
 <div class="body">
<input value="individual" name="membertype"
 type="radio"> - - 
        Basic Individual - - 
        Includes membership in GIAC and CA, <i>The
Song Sparrow </i>newsletter (electronic delivery only),
subscription to <i>Audubon </i>magazine, and many other
benefits (see below)
<br><br>
        <input title="Family" name="membertype"
 value="family" type="radio"> - - 
Basic Family   Includes the benefits above plus discounts at the
GIAC Nature Store and on GIAC programs for your entire family
<br><br>

<input title="Chickadee" name="membertype"
 value="chickadee" type="radio">
Chickadee - - Includes all standard membership benefits plus
enrolls you as a <i>Founding Member</i> of GIAC
plus an Audubon coffee mug
<br>
<br>
</div>

  <br>
  <button value="submit" name="Submit">Apply for
Membership!</button>
  </span>

Hi bmheck,

I'm gald it's working but I still don't see where the multiple copies come from. I'm busy today but till try to take a closer look later this week.

Bob