Hello,
I must be doing something dumb, because Internet Explorer is not validating any of my form fields. It works fine in FireFox and Chrome. I have validation turned on, set to Mootools, and am "showing my own divs". Can someone please check out my code and let me know where I've gone wrong? Thanks so much!
I must be doing something dumb, because Internet Explorer is not validating any of my form fields. It works fine in FireFox and Chrome. I have validation turned on, set to Mootools, and am "showing my own divs". Can someone please check out my code and let me know where I've gone wrong? Thanks so much!
<div class="form_item requiredField">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">First Name*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="first_name" name="first_name" type="text" />
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_first_name" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Last Name*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="This is a required field." id="last_name" name="last_name" type="text" />
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_last_name" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">City / State*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="This is a required field." id="city_state" name="city_state" type="text" />
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_city_state" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Zip*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="This is a required field." id="zip" name="zip" type="text" />
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_zip" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 200px;">Country*</label>
<select class="cf_inputbox required" id="country" size="1" title="This is a required field." name="country">
<option value="United States">United States</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="not listing all the countries">etcetera...</option>
</select>
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_country" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Email*</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="This is a required field." id="email" name="email" type="text" />
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_email" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 200px;">How Did You Hear About Us?*</label>
<select class="cf_inputbox" id="hearabout" size="1" title="This is a required field." name="hearabout">
<option value="">Choose Option</option>
<option value="student / alum">student / alum</option>
<option value="event">event</option>
<option value="Friend / family">Friend / family</option>
<option value="Web ad">Web ad</option>
<option value="Magazine article">Magazine article</option>
<option value="Google search">Google search</option>
<option value="Yahoo search">Yahoo search</option>
<option value="Other search engine">Other search engine</option>
<option value="Facebook">Facebook</option>
<option value="MySpace">MySpace</option>
<option value="Twitter">Twitter</option>
<option value="YouTube">YouTube</option>
</select>
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_hearabout" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 200px;">Program interested in:*</label>
<select class="cf_inputbox validate-selection" id="program" size="1" title="This is a required field." name="program">
<option value="">Choose Option</option>
<option value="Core + DSP">Core + DSP</option>
<option value="Core">Core</option>
<option value="Build your own">Build your own</option>
<option value="not sure">not sure</option>
</select>
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_program" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 200px;">Enrollment Cycle*</label>
<select class="cf_inputbox" id="cycle" size="1" title="This is a required field." name="cycle">
<option value="">Choose Option</option>
<option value="Jan">Jan</option>
<option value="March">March</option>
<option value="May">May</option>
<option value="July">July</option>
<option value="Sept">Sept</option>
<option value="Nov">Nov</option>
<option value="not sure">not sure</option>
</select>
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_cycle" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 200px;">Year*</label>
<select class="cf_inputbox validate-selection" id="year" size="1" title="This is a required field." name="year">
<option value="">Choose Option</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="not sure">not sure</option>
</select>
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_year" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 200px;">Are you interested in On-Site or On-Line training?*</label>
<select class="cf_inputbox validate-selection" id="training_type" size="1" title="This is a required field." name="training_type">
<option value="">Choose Option</option>
<option value="On-Site">On-Site</option>
<option value="On-Line">On-Line</option>
<option value="both">both</option>
</select>
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_training_type" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item requiredField">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 200px;">What tool are you most interested in?*</label>
<select class="cf_inputbox validate-selection" id="tool_interest" size="1" title="This is a required field." name="tool_interest">
<option value="">Choose Option</option>
<option value="On-Site">On-Site</option>
<option value="Logic">Logic</option>
<option value="Live">Live</option>
<option value="Reason Record">Reason/Record</option>
<option value="Native Instruments">Native Instruments</option>
<option value="Waves">Waves</option>
<option value="all of the above">all of the above</option>
<option value="not sure">not sure</option>
</select>
</div>
<div class="cfclear"> </div>
<div id="CF_LV_ERROR_tool_interest" style="display:none;" class="validation">Please fill in required fields.</div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 200px;">Enter Promo Code</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_24" name="tags" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: 200px;">Comments / Questions</label>
<textarea class="cf_inputbox" rows="3" id="text_21" title="" cols="30" name="comments"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item requiredField">
<div class="form_element">
{ReCaptcha}
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit the Basics" name="button" type="submit" id="submit" />
</div> <span class="or">Or... Continue On to Submit the Full Application.
</div>
<div class="cfclear"> </div>
<h2 class="trainingForm">The Full Application</h2>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: auto; clear:both;">Age</label>
<div class="cfclear"> </div>
<select class="cf_inputbox" id="select_28" size="1" title="" name="age">
<option value="">Choose Option</option>
<option value="Still in HS">Still in HS</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20-75">20-75</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width:auto; clear:both;">Education Level</label>
<div class="cfclear"> </div>
<select class="cf_inputbox" id="select_32" size="1" title="" name="education_level">
<option value="">Choose Option</option>
<option value="Still in high school">Still in high school</option>
<option value="Did not complete high school">Did not complete high school</option>
<option value="High school graduate">High school graduate</option>
<option value="G.E.D.">G.E.D.</option>
<option value="Some college">Some college</option>
<option value="Associate's Degree">Associate's Degree</option>
<option value="Bachelor's Degree">Bachelor's Degree</option>
<option value="Master's Degree">Master's Degree</option>
<option value="Doctoral / Post Graduate">Doctoral / Post Graduate</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: auto; clear:both;">College Experience</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">College Experience :: Describe your college experience, if any. (ex: Bachelor of Science, Penn State / attended a few years, but never finished / none / etc.)</div>
<div class="cfclear"> </div>
<textarea class="cf_inputbox" rows="3" id="text_46" title="" cols="30" name="college_exp"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: auto; clear:both;">Learning Style</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Learning Style :: Which best describes your learning style?</div>
<div class="cfclear"> </div>
<div class="">
<input value="Tactile (I learn primarily by doing.)" title="" class="radio" id="radio00" name="style" type="radio" />
<label for="radio00" class="radio_label">Tactile (I learn primarily by doing.)</label>
<br />
<input value="Example-led (Show me once and I can take it from there.)" title="" class="radio" id="radio01" name="style" type="radio" />
<label for="radio01" class="radio_label">Example-led (Show me once and I can take it from there.)</label>
<br />
<input value="Self-discovery (I'm good with books, manuals, Internet research, etc.)" title="" class="radio" id="radio02" name="style" type="radio" />
<label for="radio02" class="radio_label">Self-discovery (I'm good with books, manuals, Internet research, etc.)</label>
<br />
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_checkbox">
<label class="cf_label" style="width: auto; clear:both;">Interest in Sound</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Interest in Sound :: Which of the following best describes your interest in sound (choose all that apply):</div>
<div class="cfclear"> </div>
<div class="">
<input value="Music" title="" class="radio" id="check10" name="music[]" type="checkbox" />
<label for="check10" class="check_label">Music</label>
<input value="Film/TV" title="" class="radio" id="check11" name="film_tv[]" type="checkbox" />
<label for="check11" class="check_label">Film/TV</label>
<input value="Games" title="" class="radio" id="check12" name="games[]" type="checkbox" />
<label for="check12" class="check_label">Games</label>
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: auto; clear:both;">Musical Training</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Musical Training :: Please describe any musical training you have had. (ex: played guitar for 3 years / played piano for 12 years / DJ'ing for 3 years / singer in a band / make my own beats for 3 years / etc.)</div>
<div class="cfclear"> </div>
<textarea class="cf_inputbox" rows="3" id="text_36" title="" cols="30" name="musical_training"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: auto; clear:both;">Sound Tools</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Sound Tools :: Please describe any sound tools you own. (ex: FL Studio / Ableton Live / Pro Tools / Intel-based Mac / Shure Microphones / etc.)</div>
<div class="cfclear"> </div>
<textarea class="cf_inputbox" rows="3" id="text_39" title="" cols="30" name="sound_tools"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: auto; clear:both;">Tools Experience</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Tools Experience :: Please describe any experience you've had with software recording and music creation tools. (ex: recorded my band's demo / produce my own hip-hop / remixed some tracks / compose my own music / create my own electronic music / etc.)</div>
<div class="cfclear"> </div>
<textarea class="cf_inputbox" rows="3" id="text_41" title="" cols="30" name="tools_experience"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: auto; clear:both;">Experience</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Experience :: Describe any experience in the music and sound industry you might have. (ex: toured with my band the last 2 years / DJ'd across Europe last year / scored a student film last month / did a video for YouTube / etc.)</div>
<div class="cfclear"> </div>
<textarea class="cf_inputbox" rows="3" id="text_42" title="" cols="30" name="experience"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: auto; clear:both;">Mac or PC?</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Computer :: Do you use a Mac or PC computer?</div>
<div class="cfclear"> </div>
<div class="">
<input value="Mac" title="" class="radio" id="radio20" name="computer" type="radio" />
<label for="radio20" class="radio_label">Mac</label>
<input value="PC" title="" class="radio" id="radio21" name="computer" type="radio" />
<label for="radio21" class="radio_label">PC</label>
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: auto; clear:both;">Computer Savvy</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Computer Savvy :: Please rate your computer savvy, with 1 being "I think that's called a mouse" and 5 being "I build my own computers while surfing 12 websites at a time and hacking my dad's email account and designing my buddy's MySpace page."</div>
<div class="cfclear"> </div>
<div class="">
<input value="1" title="" class="radio" id="radio30" name="comp_skill" type="radio" />
<label for="radio30" class="radio_label">1</label>
<input value="2" title="" class="radio" id="radio31" name="comp_skill" type="radio" />
<label for="radio31" class="radio_label">2</label>
<input value="3" title="" class="radio" id="radio32" name="comp_skill" type="radio" />
<label for="radio32" class="radio_label">3</label>
<input value="4" title="" class="radio" id="radio33" name="comp_skill" type="radio" />
<label for="radio33" class="radio_label">4</label>
<input value="5" title="" class="radio" id="radio34" name="comp_skill" type="radio" />
<label for="radio34" class="radio_label">5</label>
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label" style="width: auto; clear:both;">Goals</label>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Goals :: What are your short- and long-term goals in sound? (ex: work at a large studio / create my own studio / start my own production company / produce my own music / do sound for video games / mix feature or short films / own a record label / etc.)</div>
<div class="cfclear"> </div>
<textarea class="cf_inputbox" rows="3" id="text_45" title="" cols="30" name="goals"></textarea>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit All" name="button_47" type="submit" />
</div>
<div class="cfclear"> </div>
</div>
Hi hathway,
You no longer need to 'Set to Mootools' please set that to 'None' and see if the Validation then works OK. If not please post a link to the form so we can take a quick look.
Bob
You no longer need to 'Set to Mootools' please set that to 'None' and see if the Validation then works OK. If not please post a link to the form so we can take a quick look.
Bob
Thanks for the help, I appreciate it. I just upgraded to the most recent version of Chronoforms. Next to "Validation Library" there's only one option, mootools. I tried switching "Enable Validation" to No instead of Yes and the validation still worked in Chrome, but not still not in IE. I'm switching "Enable Validation" back to Yes.
Here's the link to the form: http://www.pyramind.com/admissions/apply-now.html
Thanks again!
Here's the link to the form: http://www.pyramind.com/admissions/apply-now.html
Thanks again!
Hi hathaway,
If you view the form without the tempalte in IE then it validates OK. So, there is a conflict with something else in the template. Chromo shows a warning about the FaceBook Like box.
Unfortuately I don't see any error report in Firefox or IE which makes tracking the problem down much harder.
Bob
If you view the form without the tempalte in IE then it validates OK. So, there is a conflict with something else in the template. Chromo shows a warning about the FaceBook Like box.
Unfortuately I don't see any error report in Firefox or IE which makes tracking the problem down much harder.
Bob
Thank you! Problem solved. The stupid jquery accordion menu is causing the conflict. After removing it from the page, the validation worked flawlessly. I'll have figure out how to replace the menu or fix the conflict.
Hi hathaway,
Here's my standard post on jQuery conflicts:
Your template (or some other component) is loading the jQuery JavaScript library. Out of the box jQuery isn't compatible with the MooTools library used by Joomla! and ChronoForms. You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest is to add a line of script in the ChronoForms Form JavaScript box:
There is also a neat Joomla! system plugin named SC jQuery that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode.
Bob
Here's my standard post on jQuery conflicts:
Your template (or some other component) is loading the jQuery JavaScript library. Out of the box jQuery isn't compatible with the MooTools library used by Joomla! and ChronoForms. You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest is to add a line of script in the ChronoForms Form JavaScript box:
jQuery.noConflict();There is also a neat Joomla! system plugin named SC jQuery that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode.
Bob
This topic is locked and no more replies can be posted.
