Validation not working - SOLVED!

Hi there,

I have created a form within my Joomla site with Chronoforms and I don´t get the validation with motools to work.

I wonder if someone could help me or give any hint of what I am doing wrong.

The validation configuration is this:



The autogenerated code of the form is this:



And when I submit the form in the debug mode I get the following:



As you can see it checks the server side validation but completely passes the javascript validation.

Any idea what this could be?

The code of my form is as follows:

<table border="0" cellpadding="5" cellspacing="8" width="405px">
<tr>
	<td colspan="2" align="center">
    	<textarea rows="4" id="text_0" title="" cols="50" name="answer" style="width:390px; height:80px"></textarea>
	</td>
</tr>
<tr>
	<td align="left"><label id="label_competition" style="width:150px;">Email Address:<span style="color:#E52356; ">*</span></label></td>
	<td align="left"><input maxlength="150" size="30" id="text_1" name="email" type="text" /></td>
</tr>
<tr>
	<td align="left"><label id="label_competition" style="width:150px;">Confirm Email Adress:<span style="color:#E52356; ">*</span></label></td>
	<td align="left"><input maxlength="150" size="30" id="text_19" name="email_confirm" type="text" /></td>
</tr>
<tr>
	<td align="left"><label id="label_competition" style="width:150px;">First Name:<span style="color:#E52356; ">*</span></label></td>
	<td align="left"><input maxlength="150" size="30" id="text_2" name="name" type="text" /></td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width:150px;">Surname:<span style="color:#E52356; ">*</span></label></td>
<td align="left"><input maxlength="150" size="30" id="text_3" name="surname" type="text" /></td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width: 150px;">Gender:<span style="color:#E52356; ">*</span></label></td>
<td align="left">
	<input style="display:inline"  value="Female" id="radio00" name="radio0" type="radio" />  
	<label style="display:inline" id="label_competition"  for="radio00">Female</label>    
	<input style="display:inline"  value="Male" id="radio01" name="radio0" type="radio" />  
	<label style="display:inline" id="label_competition"  for="radio01">Male</label>
</td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width: 150px;">Year of Birth:<span style="color:#E52356; ">*</span></label></td>
<td align="left">
    <select class="competition" id="select_6" size="1" title=""  name="year_birth" style="width:235px;">
    <option value="">Choose Option</option>
    <option value="1900">1900</option>
	<option value="1901">1901</option>
	<option value="1902">1902</option>
	<option value="1903">1903</option>
	<option value="1904">1904</option>
	<option value="1905">1905</option>
	<option value="1906">1906</option>
	<option value="1907">1907</option>
	<option value="1908">1908</option>
	<option value="1909">1909</option>
	<option value="1910">1910</option>
	<option value="1911">1911</option>
	<option value="1912">1912</option>
	<option value="1913">1913</option>
	<option value="1914">1914</option>
	<option value="1915">1915</option>
	<option value="1916">1916</option>
	<option value="1917">1917</option>
	<option value="1918">1918</option>
	<option value="1919">1919</option>
	<option value="1920">1920</option>
	<option value="1921">1921</option>
	<option value="1922">1922</option>
	<option value="1923">1923</option>
	<option value="1924">1924</option>
	<option value="1925">1925</option>
	<option value="1926">1926</option>
	<option value="1927">1927</option>
	<option value="1928">1928</option>
	<option value="1929">1929</option>
	<option value="1930">1930</option>
	<option value="1931">1931</option>
	<option value="1932">1932</option>
	<option value="1933">1933</option>
	<option value="1934">1934</option>
	<option value="1935">1935</option>
	<option value="1936">1936</option>
	<option value="1937">1937</option>
	<option value="1938">1938</option>
	<option value="1939">1939</option>
	<option value="1940">1940</option>
	<option value="1941">1941</option>
	<option value="1942">1942</option>
	<option value="1943">1943</option>
	<option value="1944">1944</option>
	<option value="1945">1945</option>
	<option value="1946">1946</option>
	<option value="1947">1947</option>
	<option value="1948">1948</option>
	<option value="1949">1949</option>
	<option value="1950">1950</option>
	<option value="1951">1951</option>
	<option value="1952">1952</option>
	<option value="1953">1953</option>
	<option value="1954">1954</option>
	<option value="1955">1955</option>
	<option value="1956">1956</option>
	<option value="1957">1957</option>
	<option value="1958">1958</option>
	<option value="1959">1959</option>
	<option value="1960">1960</option>
	<option value="1961">1961</option>
	<option value="1962">1962</option>
	<option value="1963">1963</option>
	<option value="1964">1964</option>
	<option value="1965">1965</option>
	<option value="1966">1966</option>
	<option value="1967">1967</option>
	<option value="1968">1968</option>
	<option value="1969">1969</option>
	<option value="1970">1970</option>
	<option value="1971">1971</option>
	<option value="1972">1972</option>
	<option value="1973">1973</option>
	<option value="1974">1974</option>
	<option value="1975">1975</option>
	<option value="1976">1976</option>
	<option value="1977">1977</option>
	<option value="1978">1978</option>
	<option value="1979">1979</option>
	<option value="1980">1980</option>
	<option value="1981">1981</option>
	<option value="1982">1982</option>
	<option value="1983">1983</option>
	<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
	<option value="1987">1987</option>
	<option value="1988">1988</option>
	<option value="1989">1989</option>
	<option value="1990">1990</option>
	<option value="1991">1991</option>
	<option value="1992">1992</option>
	<option value="1993">1993</option>
	<option value="1994">1994</option>
	<option value="1995">1995</option>
	<option value="1996">1996</option>
	<option value="1997">1997</option>
	<option value="1998">1998</option>
	<option value="1999">1999</option>
	<option value="2000">2000</option>
	<option value="2001">2001</option>
	<option value="2002">2002</option>
	<option value="2003">2003</option>
	<option value="2004">2004</option>
	<option value="2005">2005</option>
	<option value="2006">2006</option>
	<option value="2007">2007</option>
	<option value="2008">2008</option>
	<option value="2009">2009</option>
</select>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width:150px;">Phone:<span style="color:#E52356; ">*</span></label></td>
<td align="left"><input maxlength="150" size="30" id="text_9" name="phone" type="text" /></td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width:150px;">Street Number:<span style="color:#E52356; ">*</span></label></td>
<td align="left"><input maxlength="10" size="7" id="text_10" name="st_number" type="text" /></td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width:150px;">Street Name:<span style="color:#E52356; ">*</span></label></td>
<td align="left"><input maxlength="150" size="30" id="text_11" name="st_name" type="text" /></td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width:150px;">Town:<span style="color:#E52356; ">*</span></label></td>
<td align="left"><input maxlength="150" size="30" id="text_12" name="town" type="text" /></td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width:150px;">State:<span style="color:#E52356; ">*</span></label></td>
<td align="left">
	<select class="competition" id="select_23" size="1" name="state" style="width:235px;">
    	<option value="">Choose Option</option>
     	<option value="New South Wales">New South Wales</option>
		<option value="Queensland">Queensland</option>
		<option value="South Australia">South Australia</option>
		<option value="Tasmania">Tasmania</option>
		<option value="Victoria">Victoria</option>
		<option value="Western Australia">Western Australia</option>
    </select>
</td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width: 150px;">Postcode:<span style="color:#E52356; ">*</span></label></td>
<td align="left"><input maxlength="10" size="7" title="" id="text_13" name="postcode" type="text" /></td>
</tr>
<tr>
<td align="left"><label id="label_competition" style="width: 150px;">Email Format:<span style="color:#E52356; ">*</span></label></td>
<td align="left">
	<input style="display:inline"  value="HTML" id="radio10" name="radio1" type="radio"  />   
    <label style="display:inline" id="label_competition"  for="radio10">HTML</label>      
	<input style="display:inline"  value="Text" id="radio11" name="radio1" type="radio"  />  
    <label style="display:inline" id="label_competition" for="radio11" >Text</label>
</td>
</tr>
<tr>
<td align="left"></td>
<td align="left">
	<input style="display:inline"  value="I agree with the Terms & Conditions" id="check20" name="check20" type="checkbox" class="radiocomp" />  
    <label style="display:inline" id="label_competition"  for="check20" ><span style="color:#E52356; ">* </span>I agree with the Terms & Conditions</label>
</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"><input class="buttoncompetition" value="Submit" name="button_26" type="submit" style="font-weight:bold" /></td>
</tr>
</table>

Thanks in advance!

Hi oierruiz,

There's probably a JavaScript conflict on the page with something else that is loading. Can you post a link please?

Bob

Hi GreyHead,

Thanks for your prompt answer.

I thought so at the beginning so I remove some of the javascripts called at the index.php head and see if that way it worked but it didn´t.

Let me know if you see something odd.

The link to the site is: http://122.252.5.210/~bornenak/index.php?option=com_chronocontact&chronoformname=Competitions_Grace

Thanks,

oierruiz

Hi oierruiz,

You do indeed have JQuery runnnig on the same page. If you look at the form without the template you'll see that the validation is working OK.

There are some instructions here in the forum for adapting JQuery to work with Mootools.

Bob

Thanks so much for your help GreyHead. Really appreciated.

I´ll look for that info within the forum.

Hey Bob,

I just wanted to let everyone know and for future help in this forum that I eventually fixed the problem with JQuery and Mootools with an awesome plugin I found when researching about this problem.

You can find it here: http://extensions.joomla.org/extensions/core-enhancements/scripts/7230

This plugin is used to load jQuery javascript library, and set "no conflict" mode to allow usage with mootools, and other libraries. No conflict mode removes the "$" operator from jQuery, allowing other libraries to use that operator.

This plugin does the following

- installs minified jQuery library file, version 1.3
- executes the noConflict() method after jQuery has loaded
- provides instructions on how to use jQuery safely with mootools
- jQuery UI integration + many UI templates
- a place to add custom code into the plugin
- the use of a application variable to flag if jQuery has been loaded (so that other extensions would be able to check)

It worked smooth as silk.....install and everything running perfectly!

Enjoy,

Oier

Hi Oier,

Excellent, thank you very much :-)

Bob