Client-side form validation

Warning!

Introduction

Joomla 1.5 and later versions contain a behavior, which allows your form and its elements to be validated at client side, i.e., before it is submitted to the server. The behavior enables the script validate.js and used MooTools up to version 3.2 and jQuery from version 3.3.

Note: Validate.js is a validation system different from the one provided by MooTools.

Enable the Validation

Add a behavior to your form view template. For Joomla versions before 1.5.2:

JHtmlBehavior::formvalidation();

For versions from 1.5.2 to 3.3.6:

JHtml::_('behavior.formvalidation');

For versions from 3.4:

JHtml::_('behavior.formvalidator');

Add the form-validate class to your form

<form class="form-validate"> ... </form>

Add a validation class to your form field declarations. Joomla adds a blur handler to validate the form field when the user moves away from the field.

<field name="email" type="text" class="required validate-email" size="30" />

//For radios make sure the class is applied to the options: 
 
<field name="ThisorThat" type="radio" label="Please say if it was full-time or the part-time equivalent?" >
 <option value="This" class="required">This</option>
 <option value="That" class="required">That</option>
</field>

For lists which are required the first option should have a value of "" as per:

<field name="selectme" type="list" required="true" label="Please say if it was full-time or the part-time equivalent?" >
 <option value="">Please Select</option>
 <option value="This">This</option>
 <option value="That">That</option>
</field>

The following classes are available:

• required
• validate-username
• validate-password
• validate-numeric
• validate-email
• validate-[custom] -> custom defined - see below

Note: Joomla 2.5 translates the required field attribute into a required class value.

Finally, add the validate class to your submit button. This will cause an onclick handler to be added that validates the whole form. The form will only be submitted if it is valid.

<button type="submit" class="validate">Submit form</button>

Custom Handlers

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

MooTools

window.addEvent('domready', function(){
   document.formvalidator.setHandler('birth', function(value) {
      regex=/^\d{4}-\d{2}-\d{2}$/;
      return regex.test(value);
   });
});

jQuery

jQuery(document).ready(function(){
   document.formvalidator.setHandler('birth', function(value) {
      regex=/^\d{4}-\d{2}-\d{2}$/;
      return regex.test(value);
   });
});

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

If you want a custom handler to check both the passwords (Password and Confirm Password) are same, please add the following script after the validate.js:

MooTools

window.addEvent('domready', function(){
    document.formvalidator.setHandler('passverify', function (value) {
        return ($('password').value == value); 
    });
});

jQuery

jQuery(document).ready(function(){
    document.formvalidator.setHandler('passverify', function (value) {
        return (jQuery('input[type=password]').value == value); 
    });
});

Add the class "validate-passverify" to the input field as below:

<input class="inputbox required validate-passverify" type="password" id="password2" name="password2" size="40" value="" />

Styling/Templating Invalid Elements

Joomla assigns the invalid class to form fields that do not pass the validation test. invalid is also added to the field labels. If you style the class in the cascading style sheet, your users will be able to see which fields are wrong. For instance:

.invalid {
    border-color: red !important;
}

Some site templates may already contain such definition. (This one is taken from beez_20.)

Problem & workaround with JToolBar

If you are using JHTML::_('behavior.formvalidation') with JToolBar, for example use in backend, the above method will not work. This is because it depends on onSubmit event which did not fire when we call form.submit via JavaScript. To work around this, we have to move the code in onSubmit to be in submitbutton function override. This will look like this:-

<script type="text/javascript">
/* Override joomla.javascript, as form-validation not work with ToolBar */
function submitbutton(pressbutton) {
    if (pressbutton == 'cancel') {
        submitform(pressbutton);
    }else{
        var f = document.adminForm;
        if (document.formvalidator.isValid(f)) {
            f.check.value='<?php echo JSession::getFormToken(); ?>'; //send token
            submitform(pressbutton);    
        }
        else {
            var msg = new Array();
            msg.push('Invalid input, please verify again!');
            if ($('title').hasClass('invalid')) {
                msg.push('<?php echo JText::_('COM_JONGMAN_ERROR_SCHEDULE_TITLE_IS_REQUIRED')?>');    
            }
            if($('admin_email').hasClass('invalid')){
                msg.push('<?php echo JText::_('COM_JONGMAN_ERROR_INVALID_EMAIL')?>');
            }
            alert (msg.join('\n'));
        }
    }    
}
</script>

More on mootools validation

More available classes on the mootools site here: http://mootools.net/docs/more/Forms/Form.Validator#Validators

Server- or Client-side validation?

Form validation