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: Email Address:* Confirm Email Adress:* First Name:* Surname:* Gender:* Female Male Year of Birth:* Choose Option 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 Phone:* Street Number:* Street Name:* Town:* State:* Choose Option New South Wales Queensland South Australia Tasmania Victoria Western Australia Postcode:* Email Format:* HTML Text * I agree with the Terms & Conditions Thanks in advance!

Validation not working - SOLVED!

oi

oierruiz 16 Sep, 2009

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!

Gr

GreyHead 16 Sep, 2009

Hi oierruiz,

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

Bob

oi

oierruiz 16 Sep, 2009

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

Gr

GreyHead 17 Sep, 2009

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

oi

oierruiz 17 Sep, 2009

Thanks so much for your help GreyHead. Really appreciated.

I´ll look for that info within the forum.

oi

oierruiz 18 Sep, 2009

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

Gr

GreyHead 18 Sep, 2009

Hi Oier,

Excellent, thank you very much :-)

Bob

Forums

Validation not working - SOLVED!