2

My script works when its all coded without FreeForm, but when I use FreeForm I cant get it to validate text boxes.

I want the javascript to load up a pop that tells the user they need to fill in the field.

Here is the code that I have for the form:

            {exp:freeform:form
                    form_name="contact_form" 
                    template="contact_email"
                    form:class="contact"
                    return="contact_/index#sent"

                }

                    <span class="input_container">
                        <span class="input_info">FIRST NAME</span>
                        <input type="text" value="" class="w168 mrR14"  name="fname" id="fname" />
                    </span>
                    <span class="input_container">
                        <span class="input_info">LAST NAME</span>
                        <input type="text" value="" class="w168" name="lname" id="lname" />
                    </span>
                    <div class="clr"></div>
                    <span class="input_container">
                        <span class="input_info">COMPANY</span>
                        <input type="text" value="" class="w350" name="company" id="company" />
                    </span>
                    <div class="clr"></div>
                    <span class="input_container">
                        <span class="input_info">EMAIL</span>
                        <input type="text" value="" class="w350" name="email" id="email" />
                    </span>
                    <div class="clr"></div>
                    <span class="input_container">
                        <span class="input_info">ADDRESS</span>
                        <input type="text" value="" class="w350" name="address" id="address" />
                    </span>
                    <div class="clr"></div>
                    <span class="input_container">
                        <span class="input_info">CITY</span>
                        <input type="text" value="" class="w168 mrR14" name="city" id="city" />
                    </span>
                    <span class="input_container">
                        <span class="input_info">PROVINCE/STATE</span>
                        <input type="text" value="" class="w168" name="state" id="state" />
                    </span>
                    <span class="input_container">
                        <span class="input_info">POSTAL CODE/ZIP</span>
                        <input type="text" value="" class="w168 mrR14" name="postalcode" id="postal" />
                    </span>
                    <span class="input_container">
                        <span class="input_info">COUNTRY</span>
                        <input type="text" value="" class="w168" name="country" id="country" />
                    </span>
                    <span class="input_container">
                        <span class="input_info">PHONE NUMBER</span>
                        <input type="text" value="" class="w168 mrR14" name="phone1"id ="phone" />
                    </span>
                    <span class="input_container">
                        <span class="input_info">SPECIFY</span>
                        <input type="text" value="" class="w168" name="specify" id="specify" />
                    </span>
                    <span class="input_container">
                        <span class="input_info">OCCUPATION</span>
                        <select id="occupation" name="occupation" class="w168 cw168" style="background:#f2f2f2;border:0px;color:#000;font-size:12px;"><option>architect</option><option>interior designer</option><option>contractor/consultant</option><option>retailer</option><option>end-user</option><option>other</option></select>
                    </span>
                    <span class="input_container cmrL14">
                        <span class="input_info">HOW DID YOU HEAR ABOUT US?</span>
                        <select id="about" name="about" class="w168 cw168" style="background:#f2f2f2;border:0px;color:#000;font-size:12px;"><option>magazine - specify</option><option>tradeshow</option><option>website/search engine</option><option>other - specify</option></select>
                    </span>
                    <div class="clr"></div>
                    <span class="input_container pdT8">
                        <span class="input_info">COMMENTS</span>
                        <textarea value="" class="w350" name="comment"id="comment" style=""></textarea>
                    </span>
                    <div class="clr"></div>
                    {if captcha}
                        <span class="input_container pdT8">
                            <span class="input_info">Please enter in the word you see below:</span> 
                            <input type="text" class="w168" name="captcha" id="captcha" value="" size="40" />
                            <span class="input_info">{captcha}</span>
                        </span>
                    {/if}
                    <input type="submit"  name="submit"  id="submit" value="SUBMIT"class="submitbutton" style="cursor:pointer"/>
                {/exp:freeform:form}
                <div class="clear"></div>
2
  • Here is the javascript code that I use: function validateForm() { var x=document.forms["contact_form"]["fname"].value; if (x==null || x=="") { alert("Please enter first name."); return false; } var x=document.forms["contact_form"]["lname"].value; if (x==null || x=="") { alert("Please enter last name."); return false; } return true; } </script>
    – Sam
    Nov 13 '13 at 17:38
  • If the JavaScript function you're using is searching for the HTML form tag to trigger the validation...then, no, it won't be able to work with FreeForm. Do you have an example URL for us? Or can you please put your code into a jsfiddle? That might help us get a better context - seeing what else is in your page, if you're using any jQuery plugins, et cetera.
    – user800
    Nov 13 '13 at 19:29
2

I never used Solspace Freeform, but, looking at the docs, I had one idea.

form:ATTRIBUTE_NAME=

This parameter allows you to control any form attribute for the form in your template. Simply replace ATTRIBUTE_NAME with an attribute name such as id, name, class, onsubmit, etc, and specify a value for that attribute. You can specify this parameter multiple times to control as many attributes as necessary. This would normally be done to control your form with Javascript or style it with CSS.

Shouldn't you be using the parameter form:name too?

{exp:freeform:form
     form_name="contact_form" 
     template="contact_email"
     form:class="contact"
     return="contact_/index#sent"
     form:name="contact_form"
}
2

As far as I can see you have not assigned an event to validateForm(). Nothing is executing this query, not so strange that it's not working.

For example Ise jQuery to assign the function to you submit button. Something like this:

$(“input[type=submit]”).click(function(){
  ValidateForm();
});
1

Perhaps you can give the Forms JS Validation plugin a try http://devot-ee.com/add-ons/forms-js-validation.

Example:

{exp:forms_js_validation:init}
{exp:forms_js_validation:add
  selector=".contact"
  input_element_wrapper=".input_container"
  require_class="require"
}

{exp:freeform:form
  form_name="contact_form" 
  template="contact_email"
  form:class="contact"
  return="contact_/index#sent"
}
  <span class="input_container">
    <span class="input_info">FIRST NAME</span>
    <input type="text" value="" class="w168 mrR14 require"  name="fname" id="fname" />
  </span>

  <span class="input_container">
    <span class="input_info">LAST NAME</span>
    <input type="text" value="" class="w168 require" name="lname" id="lname" />
  </span>

  <div class="clr"></div>

  <input type="submit"  name="submit"  id="submit" value="SUBMIT"class="submitbutton" style="cursor:pointer"/>
{/exp:freeform:form}
<div class="clear"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.