June 2014 UPDATE: Since the new 1shop forms have a form validator built in, this script is no longer needed and will not work with the new 1Shop forms. It will continue to work with old form code.
Here is the updated Form Validator script instructions. This allows your form to pop up error messages when people forget to fill in certain fields. This is important for several reasons and as you can see below, it’s simple and easy to add to your form.
[box title=”STEP ONE” color=”#59474F”]Place the following script after the <head> tag of your page containing the form:
[sourcecode language=”plain”]
<script type="text/javascript" src="http://amazingsystem.com/scripts/gen_validatorv4.js"></script>
[/sourcecode]
[/box]
[box title=”STEP TWO” color=”#59474F”]
Copy and paste this script right before the </html> tag of your page:
[sourcecode language=”plain”]
<script type="text/javascript">// <![CDATA[
var frmvalidator = new Validator("form1");
frmvalidator.addValidation("Name","req","Please enter your name");
frmvalidator.addValidation("Email1","req", "Please enter your email");
frmvalidator.addValidation("Workphone","req","Please enter your Primary phone");
frmvalidator.addValidation("field1","req","Please enter the type of event");
frmvalidator.addValidation("field2","req","Please enter the date of event");
frmvalidator.addValidation("field4","req","Please enter the event location");
frmvalidator.addValidation("field5","req","How did you hear of us?");
// ]]></script>
[/sourcecode]
[/box]
[box title=”STEP THREE” color=”#59474F”] Now, simply adjust the above script with your form field names that you would like to be required. If you need to add more, simply copy and paste one of the lines and update the field name. For example, if you needed to add field6, which happens to be the number of guests, you would simply add this line:
[sourcecode language=”plain”]
<strong>frmvalidator.addValidation("field6","req","Please enter number of guests");</strong>
[/sourcecode]
[/box]
[box title=”STEP FOUR” color=”#59474F”]Save your work and test it out in a browser!
[/box]
[accordion]
[spoiler title=”Advanced”]Download the script so you can upload to your own hosting server. Simply update the URL listed in Step 1 above to be of the file on your hosting (after extracting the file & uploading it to your site).
[button link=”http://www.amazingsystem.com/scripts/gen_validatorv4.zip” color=”#1BE056″ size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Download[/button]
[box title=”Dropdown validation” color=”#59474F”]
If you want to force someone to choose a dropdown box option, this is the error code to add into the script in Step 2 above.
[sourcecode language=”plain”]</pre>
frmvalidator.addValidation("field5","dontselect=0" ,"How did you hear of David?");
<pre>[/sourcecode]
Your drop down box must have a default option selected which value will be set to 0. See this example:
[sourcecode language=”plain”]
<select id="field5" name="field5" size="1">
<option selected value="0" >Select Option</option>
<option>Personal Referral</option>
<option>Online Directory</option>
<option >Internet Search</option>
<option>I’m a prior client</option>
<option>Other (write in below)</option>
</select>
[/sourcecode]
[/box]
[box title=”Checkbox Validation” color=”#59474F”]
Add this error code to Step 2 above. Using “selmin” and “sellmax”, you can set the minimum or maximum amount of checked checkboxes required to submit the form.
[sourcecode language=”plain”]
chktestValidator.addValidation("field16","selmin=1","Please select at least one entertainment option");
chktestValidator.addValidation("field16","selmax=5","Please select no more than 5 features");
[/sourcecode]
[/box]
[box title=”Radio Buttons Validation” color=”#59474F”]
[sourcecode language=”plain”]
chktestValidator.addValidation("Terms","selectradio","Please select an option from ‘Agree to Terms’");
chktestValidator.addValidation("Terms","dontselectradio=Disagree","Can’t proceed since you disagree to the Terms");
[/sourcecode]
[/box]
[/spoiler]
[/accordion]
Have any problems setting it up? Leave your comments in the comments section below!