Difference between revisions of "Client-side form validation"

From Joomla! Documentation

Line 77: Line 77:
You can then set any class to validate-birth to make it validate as yyyy-mm-dd.  (Valid date is not checked!)
You can then set any class to validate-birth to make it validate as yyyy-mm-dd.  (Valid date is not checked!)
[[Category:Tutorials]][[Category:Component Management]]

Revision as of 08:04, 19 September 2010



Joomla 1.5 contains a behavior JHTMLBehavior::formvalidation() which enables the script validate.js. It uses mootools and allows your form and its elements to be validated.

Note: For more recent versions of Joomla (1.5.2) use JHTML::_('behavior.formvalidation') instead of JHTMLBehavior::formvalidation()

Enable the Validation

The only thing you have to do is set the classes of the form and elements to the specified meanings. Classes:


  • form-validate -> enable validation

Form elements

  • required
  • validate-username
  • validate-password
  • validate-numeric
  • validate-email
  • validate-[custom] -> custom handlers have to be set then!

Style Invalid Elements

If some elements don't validate they will get the class

  • invalid

If you style the class in the cascading style sheet, your users will be able to see which fields are wrong. For instance:

.invalid {color:red;}

Only Accept the Form After Validation

If you don't want the form to submit anything unless the values are validated, here's a nice script:

<?php JHTMLBehavior::formvalidation(); ?>
<script language="javascript">
function myValidate(f) {
   if (document.formvalidator.isValid(f)) {
      f.check.value='<?php echo JUtility::getToken(); ?>'; //send token
      return true; 
   else {
      var msg = 'Some values are not acceptable.  Please retry.';
      //Example on how to test specific fields
      if($('email').hasClass('invalid')){msg += '\n\n\t* Invalid E-Mail Address';}
   return false;
<form id="WV-form" method="post" class="form-validate" onSubmit="return myValidate(this);">
<input type="hidden" name="check" value="post"/>
<input type="text" name="email" id="email" size="30"  class="required validate-email"/>
<input type="submit" value="Submit" />

The page that receives the value can check several things:

defined( '_JEXEC' ) or die( 'Restricted access' );  //Verify Joomla enabled
$jAp=& JFactory::getApplication();
if ($_POST['check']!=JUtility::getToken()) {
   // First verify (by a Javascript error or other methods) that the form has not been submitted without the validation
   if ($_POST['check']=='post') $jAp->enqueueMessage('Please check all the fields of the form, aub.<br/>
If your browser blocks Javascript, then this form will never be successful. This is a security measure.','error');
   // If the check still isn't a valid token, do nothing. This might be a spoof attack or other invalid form submission
   return false;

Custom Handlers

If you want a custom handler, you can add one to the class, as in the following example (defined AFTER the validate.js):

Window.onDomReady(function() {
   document.formvalidator.setHandler('birth', function(value) {
      return regex.test(value);

You can then set any class to validate-birth to make it validate as yyyy-mm-dd. (Valid date is not checked!)