Difference between revisions of "Client-side form validation"
From Joomla! Documentation
(Custom handler) |
|||
Line 16: | Line 16: | ||
* validate-email | * validate-email | ||
* validate-[custom] -> custom handlers have to be set then! | * validate-[custom] -> custom handlers have to be set then! | ||
− | + | == Style invalid elements == | |
If some elements don't validate they will get the class | If some elements don't validate they will get the class | ||
* invalid | * invalid | ||
If you style this to e.g. red background and white foreground, your users will be able to see which fields are wrong. | If you style this to e.g. red background and white foreground, your users will be able to see which fields are wrong. | ||
− | == | + | == Really only accept 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"> | 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(); ?> | <?php JHTMLBehavior::formvalidation(); ?> | ||
Line 56: | Line 56: | ||
}</source> | }</source> | ||
− | == | + | == Custom handlers == |
− | + | If you want a custome handler, you can add one to the class, as follow 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!) |
Revision as of 08:34, 14 April 2008
Intro[edit]
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[edit]
The only thing you have to do is set the classes of the form and elements to specified meanings. Classes:
Form[edit]
- form-validate -> enable validation
Form elements[edit]
- required
- validate-username
- validate-password
- validate-numeric
- validate-email
- validate-[custom] -> custom handlers have to be set then!
Style invalid elements[edit]
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.
Really only accept form after validation[edit]
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;
}
Custom handlers[edit]
If you want a custome handler, you can add one to the class, as follow 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!)