js-validation.php
Client-side JavaScript validation.
Client-side JavaScript validationDemonstrates client-side validation. Fields are validated when they lose focus. The regular expression has to match the entire string (as in HTML5 patterns). Contrary to PHP preg_match() "/[a-z]/" does not match "aaa".
<?php
/*
* Load the library...
*/
require_once '../../HtmlForm.php';
/*
* Create the example form 'jsExample'
*/
/*
* Add the various input elements to the form by calling the '"add" + element
* type' method.
*/
$form->addText('username', [
'label' => 'User name',
'required' => true,
]);
$form->addEmail('email', [
'label' => 'Email address',
]);
$form->addBoolean('accept', [
'label' => 'Accept terms and conditions.',
'required' => true,
]);
/*
* The validator pattern has to match the complete string (HTML5 spec). Here
* are some examples:
*/
$form->addText('singleLetter', [
'label' => 'Single letter',
'required' => true,
'validator' => '/[a-zA-Z]/',
]);
$form->addText('letters', [
'label' =>'One ore more letters',
'required' => true,
'validator' => '/[a-zA-Z]+/',
]);
/*
* The process method is essential to the functionality of the form. It serves
* various purposes:
* - it validates submitted data if there is any
* - it redirects to the success page if all the data is valid
* - it stores the data in the session and redirects to the form to circumvent
* the form resubmission problem
*/
$form->process();
/*
* Finally, if the form is valid, dump the data (for demonstration). If it's
* not valid (or if it hasn't been submitted yet) display the form.
*/
if ($form->validate()) {
/*
* Success, do something useful with the data and clear the session.
* The getValues method returns an array of the form element values.
*/
echo('<a href="">back</a>');
echo('<pre>');
var_dump($form->getValues());
echo('</pre>');
$form->clearSession();
} else {
/*
* Load the necessary scripts. jQuery, jQuery Tools and the depage-forms
* customization.
*/
?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../../lib/css/depage-forms.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="../../lib/js/jquery.tools.min.js"></script>
<script src="../../lib/js/effect.min.js"></script>
</head>
<body>
<?php
/*
* Display the form.
*/
echo ($form);
?>
</body>
<?php
}