Home Downloads Forums Shop FAQs Blog Contact Demo Login
Home
/
Forums
/
Validation and css Probs

Check the new Joomla Extension Builder

Validation and css Probs

mo
mooseport 18 Nov, 2007
Hi,

after i found help in this forum i will try to get a nother problem fix for the next thing.

My problem is a validation problem and i think it depends on css formatting.

when i make a non css formated field the validation works.
e.g. 

<td width="300"><input type="text" name="textfieldName" size="24" /></td>


when i make a css formated field the validation faild.
e.g.

<td colspan="2" width="400"><input class="form_text" type="text" name="subject" value=""/></td>


What should i do to fix this problem?

I use the latest Chrono Forms Module.

I hope i find help for this problem.

Mosseport

Post edited by: mooseport, at: 2007/11/18 12:04<br><br>Post edited by: mooseport, at: 2007/11/18 12:06
Gr
GreyHead 18 Nov, 2007
Hi Mosseport,

The Validation works by changing the 'class' name of the input field. If you already have a 'class' entry then it will break the validation. At present this is a known problem with the code that ChronoForms uses for Validation.

There may be a way of working round this - if you pst your form html and the related css I'll have a look.

Bob
mo
mooseport 18 Nov, 2007
Hi GreyHead,

thanks that you help me again.

Here is the html Code:
<table width="564" border="0" cellspacing="0" cellpadding="10">
    <tr>
      <td bgcolor="#F6F6F6" width="52"></td>

      <td bgcolor="#F6F6F6" width="400">
        <table width="400" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="118">E-Mail</td>
            <td width="282"><input class="form_text" type="text" name="email"
            value="" size="33" /></td>
          </tr>

          <tr>
            <td width="118" height="10"></td>
            <td width="282" height="10"></td>
          </tr>

          <tr>
            <td width="118">Anrede</td>
            <td width="282"><select class="form_sex" name="anrede">
              <option value="">
                Bitte wählen...
              </option>

              <option value="Herr">
                Herr
              </option>

              <option value="Frau">
                Frau
              </option>
            </select></td>
          </tr>

          <tr>
            <td width="118" height="10"></td>
            <td width="282" height="10"></td>
          </tr>

          <tr>
            <td width="118">Vorname</td>
            <td width="282"><input class="form_text" type="text" name="vorname"
            value="" size="33" /></td>
          </tr>

          <tr>
            <td width="118" height="10"></td>
            <td width="282" height="10"></td>
          </tr>

          <tr>
            <td width="118" height="26">Nachname</td>
            <td width="282" height="26"><input class="form_text" type="text"
            name="nachname" value="" size="33" /></td>
          </tr>

          <tr>
            <td width="118" height="10"></td>
            <td width="282" height="10"></td>
          </tr>

          <tr>
            <td width="118">Straße / Nr.</td>
            <td valign="middle" width="282"><input class="form_street" type=
            "text" name="strasse" size="9" /> <input class="form_hnumber" type=
            "text" name="hnummer" size="4" /></td>
          </tr>

          <tr>
            <td width="118" height="10"></td>
            <td width="282" height="10"></td>
          </tr>

          <tr>
            <td width="118">PLZ / Ort</td>
            <td width="282"><input class="form_plz" type="text" name="plz"
            size="7" /> <input class="form_ort" type="text" name="ort" size=
            "24" /></td>
          </tr>

          <tr>
            <td width="118" height="10"></td>
            <td width="282" height="10"></td>
          </tr>

          <tr>
            <td width="118">Telefon</td>
            <td width="282"><input class="form_text" type="text" name="telefon"
            value="" size="33" /></td>
          </tr>

          <tr>
            <td width="118" height="15"></td>
            <td width="282" height="15"></td>
          </tr>

          <tr>
            <td colspan="2" width="400"><strong>Betreff</strong></td>
          </tr>

          <tr>
            <td width="118" height="15"></td>
            <td width="282" height="15"></td>
          </tr>

          <tr>
            <td colspan="2" width="400"><input class="form_text" type="text"
            name="betreff" value="" style="width:400px; _width:402px;" /></td>
          </tr>

          <tr>
            <td width="118" height="15"></td>
            <td width="282" height="15"></td>
          </tr>

          <tr>
            <td colspan="2" width="400"><strong>Ihre Nachricht</strong></td>
          </tr>

          <tr>
            <td width="118" height="15"></td>
            <td width="282" height="15"></td>
          </tr>

          <tr>
            <td colspan="2" width="400">
            <textarea class="form_text_big" name="nachricht" rows="13" cols=
            "47">
</textarea></td>
          </tr>
        </table>
      </td>
      <td bgcolor="#F6F6F6" width="52"></td>
    </tr>

    <tr>
      <td bgcolor="#F6F6F6" width="52" height="5"></td>
      <td bgcolor="#F6F6F6" width="400" height="5"></td>
      <td bgcolor="#F6F6F6" width="52" height="5"></td>
    </tr>

    <tr>
      <td bgcolor="#F6F6F6" width="52" height="5"></td>
      <td bgcolor="#F6F6F6" width="400" height="5">
        <table width="400" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="50"></td>
            <td width="300"></td>
            <td width="50"><input type="submit" name="submit" /></td>
          </tr>
        </table>
      </td>
      <td bgcolor="#F6F6F6" width="52" height="5"></td>
    </tr>
  </table>
And here is the used css code:
/*Form Inputs*/

.form_text {
width: 282px;
height: 20px;
text-align: left;
color: #1b3e88;
font-size: 11px;
}

.form_text_big {
width: 400px;
height: 282px;
text-align: left;
color: #1b3e88;
font-size: 11px;
}

.form_street {
width: 228px;
height: 20px;
text-align: left;
color: #1b3e88;
font-size: 11px;
}

.form_plz {
width: 75px;
height: 20px;
text-align: left;
color: #1b3e88;
font-size: 11px;
}

.form_hnumber {
width: 50px;
height: 20px;
text-align: left;
color: #1b3e88;
font-size: 11px;
}

.form_ort {
width: 203px;
height: 20px;
text-align: left;
color: #1b3e88;
font-size: 11px;
}

.form_sex {
width: 90px;
height: 20px;
text-align: left;
color: #1b3e88;
font-size: 11px;
}
Thanks for your help GreyHead

Mooseport

Tidied html & added code tags

Post edited by: GreyHead, at: 2007/11/18 12:41<br><br>Post edited by: GreyHead, at: 2007/11/18 15:45
mo
mooseport 18 Nov, 2007
What means: Tidied html & added code tags ??
Gr
GreyHead 18 Nov, 2007
Hi Mooseport,

There's a simple fix here - as you use a different class for each input field you can simply switch the classes to ids for the css. Validation should them work OK, you'll need to create differnet ids for the fields where you have used form_text but one css declaration should work OK.

Not ideal but should be OK.

Bob
Gr
GreyHead 18 Nov, 2007
I ran the HTML through HTML Tidy to make it easier to read and changed the 'quote' tags to 'code' tags. Just housekeeping.

Bob<br><br>Post edited by: GreyHead, at: 2007/11/18 12:56
mo
mooseport 18 Nov, 2007
GrayHead,

can you explain it again? Should i give the fields id´s instant of classe´s?

Please try to tell me what i should do again.

Mooseport
mo
mooseport 18 Nov, 2007
Now i have made the following changes:

html:
<td width="118">E-Mail</td>
<td width="282"><input id="form_text" type="text" name="kontakt_email" value="" size="33" /></td>
css:

#form_text {
width: 282px;
height: 20px;
text-align: left;
color: #1b3e88;
font-size: 11px;
}
but it doesent work. The Validation failed.
Mooseport

Post edited by: mooseport, at: 2007/11/18 13:30<br><br>Post edited by: GreyHead, at: 2007/11/18 13:37
Gr
GreyHead 18 Nov, 2007
Hi Mooseport,

Hmmm . . . in that case there's some other reason that the validation fails. Please take a backup copy of your form and post it here (or email to info at greyhead.net) so I can take a look.

Bob
mo
mooseport 18 Nov, 2007
Hi GrayHead,

here is the Form html Code: 


<table width="564" border="0" cellspacing="0" cellpadding="10">
			<tr>
				<td bgcolor="#f6f6f6" width="52"></td>
				<td bgcolor="#f6f6f6" width="400">
					<table width="400" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="118">TEST</td>
							<td width="282"><input type="text" name="test" size="24" /></td>
						</tr>
						<tr>
							<td width="118"></td>
							<td width="282"></td>
						</tr>
						<tr>
							<td width="118">E-Mail </td>
							<td width="282"><input id="form_text" type="text" name="kontakt_email" value="" size="33" /></td>
						</tr>
						<tr height="10">
							<td width="118" height="10"></td>
							<td width="282" height="10"></td>
						</tr>
						<tr>
							<td width="118">Anrede</td>
							<td width="282"><select id="form_sex" name="kontakt_anrede">
									<option value="">Bitte wählen...</option>
									<option value="Herr">Herr</option>
									<option value="Frau">Frau</option>
								</select></td>
						</tr>
						<tr height="10">
							<td width="118" height="10"></td>
							<td width="282" height="10"></td>
						</tr>
						<tr>
							<td width="118">Vorname</td>
							<td width="282"><input id="form_text" type="text" name="kontakt_vorname" value="" size="33" /></td>
						</tr>
						<tr height="10">
							<td width="118" height="10"></td>
							<td width="282" height="10"></td>
						</tr>
						<tr height="26">
							<td width="118" height="26">Nachname</td>
							<td width="282" height="26"><input id="form_text" type="text" name="kontakt_nachname" value="" size="33" /></td>
						</tr>
						<tr height="10">
							<td width="118" height="10"></td>
							<td width="282" height="10"></td>
						</tr>
						<tr>
							<td width="118">Straße / Nr.</td>
							<td valign="middle" width="282"><input id="form_street" type="text" name="kontakt_strasse" size="9" />  <input id="form_hnumber" type="text" name="textfieldName" size="4" /></td>
						</tr>
						<tr height="10">
							<td width="118" height="10"></td>
							<td width="282" height="10"></td>
						</tr>
						<tr>
							<td width="118">PLZ / Ort</td>
							<td width="282"><input id="form_plz" type="text" name="kontakt_ort" size="7" />  <input id="form_ort" type="text" name="kontakt_ort" size="24" /></td>
						</tr>
						<tr height="10">
							<td width="118" height="10"></td>
							<td width="282" height="10"></td>
						</tr>
						<tr>
							<td width="118">Telefon</td>
							<td width="282"><input id="form_text" type="text" name="kontakt_telefon" value="" size="33" /></td>
						</tr>
						<tr height="15">
							<td width="118" height="15"></td>
							<td width="282" height="15"></td>
						</tr>
						<tr>
							<td colspan="2" width="400"><strong>Betreff</strong></td>
						</tr>
						<tr height="15">
							<td width="118" height="15"></td>
							<td width="282" height="15"></td>
						</tr>
						<tr>
							<td colspan="2" width="400"><input id="form_text" type="text" name="kontakt_betreff" value="" style="width:400px; _width:402px;" /></td>
						</tr>
						<tr height="15">
							<td width="118" height="15"></td>
							<td width="282" height="15"></td>
						</tr>
						<tr>
							<td colspan="2" width="400"><strong>Ihre Nachricht</strong></td>
						</tr>
						<tr height="15">
							<td width="118" height="15"></td>
							<td width="282" height="15"></td>
						</tr>
						<tr>
							<td colspan="2" width="400"><textarea id="form_text_big" name="kontakt_nachricht" rows="13" cols="47"></textarea></td>
						</tr>
					</table>
				</td>
				<td bgcolor="#f6f6f6" width="52"></td>
			</tr>
			<tr height="5">
				<td bgcolor="#f6f6f6" width="52" height="5"></td>
				<td bgcolor="#f6f6f6" width="400" height="5"></td>
				<td bgcolor="#f6f6f6" width="52" height="5"></td>
			</tr>
			<tr>
				<td bgcolor="#f6f6f6" width="52"></td>
				<td bgcolor="#f6f6f6" width="400"><input type="submit" name="submitButtonName" /></td>
				<td bgcolor="#f6f6f6" width="52"></td>
			</tr>
		</table>



I hope you can help me. See please the first (test) field.
i have insert this field vor testing. With this field the validation works finde, but not with the other fields.

Thanks a lot.
Mooseport
Gr
GreyHead 18 Nov, 2007
Hi Mooseport,

All the fields work OK for me (at least the first three that I tested). Make sure that you have no spaces between the entries in the Validation tab like this "test,kontakt_email,kontakt_anrede"

Bob Validation and css Probs image 1<br><br>Post edited by: GreyHead, at: 2007/11/18 15:52
mo
mooseport 18 Nov, 2007
Hi GreyHead,

now all works finde. I have entered the names with a space.

Thank you so much.

A short Question. Wich Programm you used to make this wonderfull Screenshots?

Mooseport<br><br>Post edited by: mooseport, at: 2007/11/18 18:35
This topic is locked and no more replies can be posted.

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Terms Of Use Privacy Policy Business Partners

We accept paypal logo  stripe logo

© 2006 - 2025 ChronoEngine.com