HEADER

One of the Frequently Asked Questions in the forums here is 'How can I validate my form? There are many ways of doing this most of which involve using JavaScript. This tutorial shows you how to use one simple approach to JavaScript validation of your forms in ChronoForms.

ChronoForms is a form manager, it does not provide any of the 'form code' that you will need and that includes validation code. There are many JavaScript validation scripts freely available on the internet and most of them can be adapted to work with ChronoForms.

This tutorial uses the 'Really Easy Field Validation' from Andrew Tetlaw, download the code and read more about it here. 

We aren't going to repeat the detailed instructions for using 'Really Easy' here, they are well explained at Andrew's site; we'll just work through how to use it with ChronoForms. 

First download the 'Really Easy' package and unzip it into a convenient folder. You only really need two files from here: prototype.js which is a JavaScript framework and validation.js which is the 'Really Easy' validation code. (The other files in the distro are part of the Scriptaculous library that aren't used for 'Really Easy'.)

1) You need to upload these files to your website and to link to them from your code.

To use them with one form for our purposes you can upload the files to the components/com_chronocontact folder and add links to the beginning of your 'Form HTML' in ChronoForms.

<?php
global $mosConfig_live_site;
$folder = $mosConfig_live_site.'/components/com_chronocontact';
echo "<script src='$folder/prototype.js' type='text/javascript'></script><br />";
echo "<script src='$folder/validation.js' type='text/javascript'></script>";
?>

NB In the longer term it's probably better to link to the JavaScript files from the page header code in your template.

2) Add an id to the form using the form name by putting this code into the Form tag attachment field on the General tab: id="my_form"

3)  Add your Form HTML to the Form HTML field (after the <script> tags above). We'll use a very simple form:

Name: <input name="name" value="" type="text"><br />
E-mail: <input name="email" value="" type="text"><br />
<input name="submit" value="Submit" type="submit">

4) Add 'class' attributes to this to trigger the validations that you want. In this case we'll make both fields required and check that the e-mail field is valid.

Name: <input name="name" class="required" value="" type="text"><br />
E-mail: <input name="email" class="required validate-email" value="" type="text"><br />
<input name="submit" value="Submit" type="submit">

5) Lastly, still in the Form HTML field put this script snippet to trigger the validation and refresh the page.

 <script type="text/javascript" >
new Validation(this);
  function formCallback(result, form) {
    window.status = "validation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('my_form', {immediate : true, onFormValidate : formCallback});

</script>

Note that 'my_form' near the end must be identical to the id that you entered in the Form Tag attachment field.

Save your form, go to the form page and check the validation. Leave the form empty and click the Submit button - you should see 'This is a required field.' appear under each empty field.

PS If you want to you can use the Scriptaculous library to create effects for the error messages. To do this you'll need to upload and link to the library and modify your code. We strongly suggest that you get this basic version working first. 

Thanks to bouton who suggested this method for validation. 

This is a dummy form using the code above (except that there is some css for the border and the js files are hosted slightly differently).

Return to the Tutorials page