Client-side form validation
(Added CSS example. Corrected some typographical errrors.) |
|||
| Line 36: | Line 36: | ||
} | } | ||
else { | 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; | return false; | ||
| Line 44: | Line 49: | ||
<input type="hidden" name="check" value="post"/> | <input type="hidden" name="check" value="post"/> | ||
... | ... | ||
| − | <input type="text" name="email" size="30" class="required validate-email"/> | + | <input type="text" name="email" id="email" size="30" class="required validate-email"/> |
... | ... | ||
<input type="submit" value="Submit" /> | <input type="submit" value="Submit" /> | ||
Revision as of 04:02, 1 April 2010
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!)
