Actions

Difference between revisions of "Client-side form validation"

From Joomla! Documentation

(Creation)
 
m (Custom Handlers)
(14 intermediate revisions by 12 users not shown)
Line 1: Line 1:
== Intro ==
+
==Introduction==
 
+
 
Joomla 1.5 contains a behavior '''JHTMLBehavior::formvalidation()''' which enables the script '''validate.js'''.
 
Joomla 1.5 contains a behavior '''JHTMLBehavior::formvalidation()''' which enables the script '''validate.js'''.
It uses '''mootools''' (I think) and allows your form and its elements to be validated.  The only thing you have to do is set the '''classes''' of the form to specified meanings such as
+
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===
 +
* form-validate -> enable validation
 +
===Form elements===
 
* required
 
* required
* username
+
* validate-username
* password
+
* validate-password
* numeric
+
* validate-numeric
* email
+
* 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:
 +
<source lang="css">
 +
.invalid {color:red;}
 +
</source>
 +
==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:
 +
<source lang="php">
 +
<?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';}
 +
 
 +
      alert(msg);
 +
  }
 +
  return false;
 +
}
 +
</script>
 +
<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" />
 +
</form></source>
 +
 
 +
The page that receives the value can check several things:
 +
<source lang="php">
  
== To enable the validation ==
+
defined( '_JEXEC' ) or die( 'Restricted access' );  //Verify Joomla enabled
I believe the only thing to do is set the class "form-validate" to the form.   
+
$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;
 +
}
 +
</source>
 +
==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):
 +
<source lang="php">Window.onDomReady(function() {
 +
  document.formvalidator.setHandler('birth', function(value) {
 +
      regex=/^\d{4}(-\d{2}){2}$/;
 +
      return regex.test(value);
 +
  })
 +
})
 +
</source>
 +
You can then set any class to validate-birth 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:
 +
<source lang="javascript">
 +
<script type="text/javascript">
 +
<!--
 +
window.addEvent('domready', function(){
 +
document.formvalidator.setHandler('passverify', function (value) { return ($('password').value == value);
 +
});
 +
});
 +
// -->
 +
</script>
 +
</source>
 +
Add add the class "validate-passverify" to the input field as below:
 +
<source lang="html4strict"><input class="inputbox required validate-passverify" type="password" id="password2" name="password2" size="40" value="" />
 +
</source>
  
== TODO ==
+
==Work Around when Using with JToolBar==
* There should be a way to not let your form be submitted in case the javascript isn't loaded or contains an error.
+
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:-
How to do this?  Is this done by giving a token to the script receving the form?
+
<source lang="javascript">
* How to add your own custom form validators? setHandler? If so, how to enable this via Joomla (should this be in the html header??
+
<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 JUtility::getToken(); ?>'; //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>
 +
</source>
 +
<noinclude>[[Category:Tutorials]][[Category:Development]][[Category:Component Development]]</noinclude>

Revision as of 05:04, 7 November 2012

Contents

Introduction

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

  • 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';}
 
      alert(msg);
   }
   return false;
}
</script>
<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" />
</form>

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) {
      regex=/^\d{4}(-\d{2}){2}$/;
      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!)

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:

<script type="text/javascript">
<!--
        window.addEvent('domready', function(){
                document.formvalidator.setHandler('passverify', function (value) { return ($('password').value == value); 
                });
        });
// -->
</script>

Add 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="" />

Work Around when Using 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 JUtility::getToken(); ?>'; //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>