Actions

Difference between revisions of "Client-side form validation"

From Joomla! Documentation

(Creation)
 
Line 2: Line 2:
  
 
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''' (I think) and allows your form and its elements to be validated.   
* required
+
* username
+
* password
+
* numeric
+
* email
+
  
 
== To enable the validation ==
 
== To enable the validation ==
I believe the only thing to do is set the class "form-validate" to the form.   
+
The only thing you have to do is set the '''classes''' of the form and elements to 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 this to e.g. red background and white foreground, your users will be able to see which fields are wrong.
 +
 
 +
== Only submit 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='<?=JUtility::getToken()?>';//send token
 +
return true;
 +
}
 +
else {
 +
alert('Some values are not acceptable.  Please retry.');
 +
}
 +
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" 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">
 +
defined( '_JEXEC' ) or die( 'Restricted access' ); //Verify Joomla enabled
  
 +
$jAp=& JFactory::getApplication();
 +
if ($_POST['check']!=JUtility::getToken()) {
 +
//First verify if by a javascript error or other possibilities 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 succesfull.  This is a security measure.','error');
 +
//If then still the check isn't a valid token, do nothing as this might be a spoof attack or other invalid form submission
 +
return false;
 +
}</source>
  
 
== TODO ==
 
== TODO ==
* There should be a way to not let your form be submitted in case the javascript isn't loaded or contains an error.
 
How to do this?  Is this done by giving a token to the script receving the form?
 
 
* How to add your own custom form validators?  setHandler?  If so, how to enable this via Joomla (should this be in the html header??
 
* How to add your own custom form validators?  setHandler?  If so, how to enable this via Joomla (should this be in the html header??

Revision as of 08:08, 14 April 2008

Contents

Intro

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.

To enable the validation

The only thing you have to do is set the classes of the form and elements to 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 this to e.g. red background and white foreground, your users will be able to see which fields are wrong.

Only submit 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='<?=JUtility::getToken()?>';//send token
                return true; 
        }
        else {
                alert('Some values are not acceptable.  Please retry.');
        }
        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" 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 if by a javascript error or other possibilities 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 succesfull.  This is a security measure.','error');
        //If then still the check isn't a valid token, do nothing as this might be a spoof attack or other invalid form submission
        return false;
}

TODO

  • How to add your own custom form validators? setHandler? If so, how to enable this via Joomla (should this be in the html header??