Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

Form Validation Not working from Wizard

mnymkr 07 Aug, 2008

Man this is the most intuitive form creation script I have ever seen.

I made my Contact US form with Catpcha in seconds

http://www.simplyjoomla.com/index.php?option=com_chronocontact&chronoformname=contact

However I am having troule with the validation part. In the Form Wizard, I made each text box required but I can still submit my form without entering values.

I made sure it was enabled in the form backend.

Here is the code the wizard produced.

<DIV class=form_item   >
<DIV class="form_element cf_heading" >
<H1 class=cf_text id="" >Contact SimplyJoomla</H1></DIV>
<DIV class=clear > </DIV></DIV>
<DIV class=form_item   >
<DIV class="form_element cf_text" ><SPAN class=cf_text >Please inquire about our services using the form below.</SPAN></DIV>
<DIV class=clear > </DIV></DIV>
<DIV class=form_item   >
<DIV class="form_element cf_textbox" ><LABEL class=cf_label >Name:</LABEL><INPUT class="cf_inputbox required" id=text_4  maxLength=150 size=30 name=text_4 ></DIV>
<DIV class=clear > </DIV></DIV>
<DIV class=form_item   >
<DIV class="form_element cf_textbox" ><LABEL class=cf_label >Email:</LABEL><INPUT class="cf_inputbox required" id=text_3  maxLength=150 size=30 name=text_3 ></DIV>
<DIV class=clear > </DIV></DIV>
<DIV class=form_item   >
<DIV class="form_element cf_textarea" ><LABEL class=cf_label >What services are you insterested in:</LABEL><TEXTAREA class="cf_inputbox required" id=text_2 name=text_2 rows=3 cols=30 ></TEXTAREA></DIV>
<DIV class=clear > </DIV></DIV>
<DIV class=form_item   >
<DIV class="form_element cf_captcha" ><LABEL class=cf_label >Verify Your Human</LABEL><SPAN >{imageverification}</SPAN></DIV>
<DIV class=clear > </DIV></DIV>
<DIV class=form_item   >
<DIV class="form_element cf_button" ><INPUT  type=submit value=Submit ></DIV>
<DIV class=clear > </DIV></DIV>

I figure I must be missing something?

If the wizard is bugged this way, how do I enable it in the form panel?

GreyHead 07 Aug, 2008

Hi mnymkr,

Pleas make sure that you have quotes round your attribute values. For example:

<INPUT class="cf_inputbox required" id=text_4  maxLength=150 size=30 name=text_4 >

should be

<INPUT class="cf_inputbox required" id="text_4"  maxLength="150" size="30" name="text_4" >

Many browsers will accept unquoted attributes but it's acually poor html and can give ChronoForms and it's validator indigestion.

I'm not certain that's the cause of your problem but it's caused problems in the past (and if Max's wizard created this then it should know better).

By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39). Single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa. Authors may also use numeric character references to represent double quotes (") and single quotes ('). For double quotes authors can also use the character entity reference ".

In certain cases, authors may specify the value of an attribute without any quotation marks. The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58). We recommend using quotation marks even when it is possible to eliminate them.

emphasis added.

Bob

Max_admin 07 Aug, 2008

Hi,

first of all, you created your form using IE and thats why elements get no quotes on attributes however this is not the problem with validation although Bob's suggestions are correct and its better to have quotes but we can do nothing here since IE is creating dynamic elements with no quotes on attributes because its simply the BEST browser :mrgreen:

actually your form works well on all browsers, the validation I mean but only IE will not work because there is a JS error on page, this is a known bug, find attached some patch to fix this, this will be released with the BETA 2 soon!

cheers

Max

P.S. the patch should be extracted and overwrite similar files on components/com_chronocontact/

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

mnymkr 11 Aug, 2008

i have applied the patch and do not see a change in IE

http://www.simplyjoomla.com/index.php?option=com_chronocontact&chronoformname=llllll

all i did was a require validation

Max_admin 11 Aug, 2008

No, patch is not correctly applied, I still see the bugged validation file loaded, you should assure that the same folder with all files inside are overwritten!

Cheers

Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

jimfish 14 Aug, 2008

Hi Max,

Your patch fixed my problem with IE validation and v3 Beta 1. Thanks.

Jim

Max_admin 14 Aug, 2008

Thanks Jim!😉

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

niels77 27 Mar, 2009

Hi,

In IE some forms work perfectly, while this one, just doesn't do anything when pressing submit ?
Joomla 1.5, CF 2.5 licenced.

Here 's the code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>twin lessen</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
body,td,th {
	color: #666666;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
.invul {
	width: 30px;
	height: 15px;
	float: left;
}
.lessenbox {
	font-family: Tahoma;
	font-size: 10px;
	color: #666666;
	width: 670px;
}
a:active {
	text-decoration: none;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; 

line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color: 

#222222; }
.brdtkst {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666666;
	padding-left: 5px;
}
.invulgroot {
	width: 420px;
	height: 15px;
	float: left;
}
.invulmulti {
	width: 420px;
	height: 80px;
	float: left;
}
-->
</style>
</head>

<body>
<!--div class="lessenbox" id=".formlessen"-->
  <table width="650" height="601" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td valign="top"><span class="style4">
        <h2>Gelieve onderstaand formulier in te vullen om u in te schrijven voor TWIN-lessen:</h2>
      </span>
          <table width="648" border="0" cellspacing="7" cellpadding="0">
            <tr>
              <td height="737" align="left" valign="top" class="brdtkst"><p><strong>Les 1 

</strong>: Verkoop en kredieten<br />
                </p>
<table width="650" border="0" cellpadding="0" cellspacing="5" bgcolor="#DFF2CC">
            <tr>
                      <td width="200" height="15"><strong>Plaats</strong></td>
                      <td width="250" height="15"><strong>Data</strong></td>
                      <td height="15"><strong>Aantal personen</strong></td>
               	</tr>
                    <tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">dinsdag 7 april om 20u</td>
                      <td height="15"><input name="aantalles1a" type="text" class="invul" 

id="aantalles1a" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">dinsdag 19 mei om 20u</td>
                      <td height="15"><input name="aantalles1b" type="text" class="invul" 

id="aantalles1b" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">maandag 13 juli om 20u</td>
                      <td height="15"><input name="aantalles1c" type="text" class="invul" 

id="aantalles1c" value="0"  />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Brugge</td>
                      <td height="15">woensdag 13 mei om 20u</td>
                      <td height="15"><input name="aantalles1j" type="text" class="invul" 

id="aantalles1j" value="0"  />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 5 maart om 20u</td>
                      <td height="15"><input name="aantalles1d" type="text" class="invul" 

id="aantalles1d" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 7 mei om 20u</td>
                      <td height="15"><input name="aantalles1e" type="text" class="invul" 

id="aantalles1e" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 4 juni om 20u</td>
                      <td height="15"><input name="aantalles1f" type="text" class="invul" 

id="aantalles1f" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">woensdag 5 augustus om 20u</td>
                      <td height="15"><input name="aantalles1g" type="text" class="invul" 

id="aantalles1g" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Hasselt</td>
                      <td height="15">donderdag 12 maart om 20u30</td>
                      <td height="15"><input name="aantalles1h" type="text" class="invul" 

id="aantalles1h" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Hasselt</td>
                      <td height="15">dinsdag 16 juni om 20u30</td>
                      <td height="15"><input name="aantalles1i" type="text" class="invul" 

id="aantalles1i" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                </table>
                <p><strong>Les 2 </strong>: Magistraal, formularium en bestellingen<br />
                </p>
                <table width="650" border="0" cellpadding="0" cellspacing="5" bgcolor="#DFF2CC">
                <tr>
                      <td width="200" height="15"><strong>Plaats</strong></td>
                      <td width="250" height="15"><strong>Data</strong></td>
                      <td height="15"><strong>Aantal personen</strong></td>
                 </tr>
                    <tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">dinsdag 14 april om 20u</td>
                      <td height="15"><input name="aantalles2a" type="text" class="invul" 

id="aantalles2a" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">dinsdag 26 mei om 20u</td>
                      <td height="15"><input name="aantalles2b" type="text" class="invul" 

id="aantalles2b" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">maandag 20 juli om 20u</td>
                      <td height="15"><input name="aantalles2c" type="text" class="invul" 

id="aantalles2c" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Brugge</td>
                      <td height="15">maandag 18 mei om 20u</td>
                      <td height="15"><input name="aantalles2d" type="text" class="invul" 

id="aantalles2d" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 12 maart om 20u</td>
                      <td height="15"><input name="aantalles2e" type="text" class="invul" 

id="aantalles2e" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 14 mei om 20u</td>
                      <td height="15"><input name="aantalles2f" type="text" class="invul" 

id="aantalles2f" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 11 juni om 20u</td>
                      <td height="15"><input name="aantalles2g" type="text" class="invul" 

id="aantalles2g" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">woensdag 12 augustus om 20u</td>
                      <td height="15"><input name="aantalles2h" type="text" class="invul" 
id="aantalles2h" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Hasselt</td>
                      <td height="15">donderdag 19 maart om 20u30</td>
                      <td height="15"><input name="aantalles2i" type="text" class="invul" 

id="aantalles2i" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Hasselt</td>
                      <td height="15">dinsdag 23 juni om 20u30</td>
                      <td height="15"><input name="aantalles2j" type="text" class="invul" 

id="aantalles2j" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                </table>
                <p><strong>Les 3 </strong>: Fiches, voorschriftenboek en tarifering<br />
                </p>
		<table width="650" border="0" cellpadding="0" cellspacing="5" bgcolor="#DFF2CC">
            	<tr>
                      <td width="200" height="15"><strong>Plaats</strong></td>
                      <td width="250" height="15"><strong>Data</strong></td>
                      <td height="15"><strong>Aantal personen</strong></td>
                </tr>
                <tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">dinsdag 21 april om 20u</td>
                      <td height="15"><input name="aantalles3a" type="text" class="invul" 

id="aantalles3a" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">dinsdag 2 juni om 20u</td>
                      <td height="15"><input name="aantalles3b" type="text" class="invul" 

id="aantalles3b" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">maandag 27 juli om 20u</td>
                      <td height="15"><input name="aantalles3c" type="text" class="invul" 

id="aantalles3c" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Brugge</td>
                      <td height="15">maandag 25 mei om 20u</td>
                      <td height="15"><input name="aantalles3d" type="text" class="invul" 

id="aantalles3d" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">dinsdag 17 februari om 20u</td>
                      <td height="15"><input name="aantalles3e" type="text" class="invul" 

id="aantalles3e" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 19 maart om 20u</td>
                      <td height="15"><input name="aantalles3f" type="text" class="invul" 

id="aantalles3f" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">dinsdag 19 mei om 20u</td>
                      <td height="15"><input name="aantalles3g" type="text" class="invul" 

id="aantalles3g" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 18 juni om 20u</td>
                      <td height="15"><input name="aantalles3h" type="text" class="invul" 

id="aantalles3h" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">woensdag 19 augustus om 20u</td>
                      <td height="15"><input name="aantalles3i" type="text" class="invul" 

id="aantalles3i" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Hasselt</td>
                      <td height="15">dinsdag 24 maart om 20u30</td>
                      <td height="15"><input name="aantalles3j" type="text" class="invul" 

id="aantalles3j" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Hasselt</td>
                      <td height="15">dinsdag 30 juni om 20u30</td>
                      <td height="15"><input name="aantalles3k" type="text" class="invul" 

id="aantalles3k" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                </table>
                <p><strong>Les 4</strong> : Facturatie, kortingstabel en financieel<br />
                </p>
                <table width="650" border="0" cellpadding="0" cellspacing="5" bgcolor="#DFF2CC">
		<tr>
                      <td width="200" height="15"><strong>Plaats</strong></td>
                      <td width="250" height="15"><strong>Data</strong></td>
                      <td height="15"><strong>Aantal personen</strong></td>
                  </tr>
               	<tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">dinsdag 28 april om 20u</td>
                      <td height="15"><input name="aantalles4a" type="text" class="invul" 

id="aantalles4a" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">dinsdag 9 juni om 20u</td>
                      <td height="15"><input name="aantalles4b" type="text" class="invul" 

id="aantalles4b" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                      <td height="15">Antwerpen</td>
                      <td height="15">maandag 3 augustus om 20u</td>
                      <td height="15"><input name="aantalles4c" type="text" class="invul" 

id="aantalles4c" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Brugge</td>
                      <td height="15">maandag 1 juni om 20u</td>
                      <td height="15"><input name="aantalles4d" type="text" class="invul" 

id="aantalles4d" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">dinsdag 24 februari om 20u</td>
                      <td height="15"><input name="aantalles4e" type="text" class="invul" 

id="aantalles4e" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 26 maart om 20u</td>
                      <td height="15"><input name="aantalles4f" type="text" class="invul" 

id="aantalles4f" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15"><p>donderdag 28 mei om 20u</p></td>
                      <td height="15"><input name="aantalles4g" type="text" class="invul" 

id="aantalles4g" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">donderdag 25 juni om 20u</td>
                      <td height="15"><input name="aantalles4h" type="text" class="invul" 

id="aantalles4h" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Gent</td>
                      <td height="15">woensdag 26 augustus om 20u</td>
                      <td height="15"><input name="aantalles4i" type="text" class="invul" 

id="aantalles4i" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Hasselt</td>
                      <td height="15">dinsdag 31 maart om 20u30</td>
                      <td height="15"><input name="aantalles4j" type="text" class="invul" 

id="aantalles4j" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                    <tr>
                      <td height="15">Hasselt</td>
                      <td height="15">maandag 6 juli om 20u30</td>
                      <td height="15"><input name="aantalles4k" type="text" class="invul" 

id="aantalles4k" value="0" />
                        <span class="brdtkst">pers.</span></td>
                </tr>
                </table>
                <p>(de onderstaande velden met een * zijn verplicht in te vullen)<br />
                </p></td>
            </tr>
        </table>
        <span class="style4"><br />
        </span>
          <table width="100%" border="0" cellspacing="7" cellpadding="0">
            <tr>
              <td width="168" align="left" valign="top" class="brdtkst">Naam Apotheek*</td>
              <td width="473" class="brdtkst"><label>
                <input name="Apotheek" type="text" class="invulgroot" id="Apotheek" />
              </label></td>
            </tr>
            <tr>
              <td width="168" align="left" valign="top" class="brdtkst">Gemeente</td>
              <td class="brdtkst"><label>
                <input name="Gemeente" type="text" class="invulgroot" id="Gemeente" size="58" 

maxlength="58" />
                </label>
                  </form></td>
            </tr>
            <tr>
              <td width="168" align="left" valign="top" class="brdtkst">APB nummer*</td>
              <td class="brdtkst"><label>
                <input name="APBnr" type="text" class="invulgroot" id="APBnr" />
              </label>
                </form></td>
            </tr>
            <tr>
              <td width="168" align="left" valign="top" class="brdtkst">Telefoonnummer</td>
              <td class="brdtkst"><label>
                <input name="Telefoonnummer" type="text" class="invulgroot" id="Telefoonnummer" />
                </label>
                  </form></td>
            </tr>
            <tr>
              <td width="168" align="left" valign="top" class="brdtkst">e-mail adres*</td>
              <td class="brdtkst"><label>
                <input name="e-mail" type="text" class="invulgroot" id="e-mail" />
              </label>
                </form></td>
            </tr>
            <tr>
              <td width="168" align="left" valign="top" class="brdtkst">Opmerkingen</td>
              <td class="brdtkst"><label>
                <textarea name="Opmerkingen" cols="56" rows="5" class="invulmulti" 

id="Opmerkingen"></textarea>
                </label>
                  </form></td>
            </tr>
            <tr>
              <td width="168" class="brdtkst"> </td>
              <td class="brdtkst"><label> <br />
                  <input type="submit" name="button" id="button" value="verzenden" />
              </label>    </form>              </td>
            </tr>
      </table></td>
    </tr>
  </table>
</div>
</body>
</html>

Max_admin 27 Mar, 2009

you have head and body tags and DOCTYPE in the the code, all this will make problems when used with Chronoforms!

Regards
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

This topic is locked and no more replies can be posted.