- A login form
- A contact form
- A registration form
- A reservation form
- Dependencies
- File upload
- More rules
|
A login form
-
try clicking on the submit button without filling the form and then, as you fill the form, to see the
JavaScript validation in action
- for each example, notice how the PHP code of the form remains basically unchanged, despite the template variations
-
disable JavaScript to see the server-side validation in action
-
although in all my examples I use HTML output, you can switch to XHTML output by using the
doctye method
-
try the example in another browser and see that it works, out of the box. including IE6!
<?php
require 'path/to/Zebra_Form.php';
$form = new Zebra_Form('form', 'post', '', array('autocomplete' => 'off'));
$form->add('label', 'label_email', 'email', 'Email address', array('inside' => true));
$obj = $form->add('text', 'email');
$obj->set_rule(array(
'required' => array('error', 'Email is required!'),
'email' => array('error', 'Email address seems to be invalid!'),
));
$form->add('label', 'label_password', 'password', 'Password', array('inside' => true));
$obj = $form->add('password', 'password');
$obj->set_rule(array(
'required' => array('error', 'Password is required!'),
'length' => array(6, 10, 'error', 'The password must have between 6 and 10 characters!'),
));
$form->add('checkbox', 'remember_me', 'yes');
$form->add('label', 'label_remember_me_yes', 'remember_me_yes', 'Remember me', array('style' => 'font-weight:normal'));
$form->add('submit', 'btnsubmit', 'Submit');
if ($form->validate()) {
show_results();
} else
$form->render();
?>
In this example, the output is automatically generated by Zebra_Form's render method.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Zebra_Form Example</title>
<link rel="stylesheet" href="path/to/zebra_form.css">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.9.1.min.js"><\/script>')</script>
<script src="path/to/zebra_form.js"></script>
</body>
</html>
|