jQuery UI
When it comes to forms, the easiest way to enhance them is to use to a well-known jQuery UI plugin. It adds a lot of functionalities to basic HTML5 forms, such as date pickers, autocomplete fields, tabs, and more. A must-use for every form that your visitors are going to love!
PureCSS.io
Styling forms is often a long task. Pure CSS is a lightweight CSS framework which allows you to create good looking forms in a matter of minutes, with an outstanding support of latest HTML5 specs.
→ Info/Download
Bootstrap
Bootstrap is widely known among front-end developers, and well, there’s really nothing surprising considering how amazing this free tool is. Bootstrap is a complete front-end framework that allows you to save a lot of time when creating forms, as well as any other parts of a website. Tons of nowadays’ websites has been made with the help of Bootstrap. If you haven’t tried it yet, well, you must do it a.s.a.p.!
→ Info/Download
jQuery Bootstrap validator
Talking about Bootstrap… what about enhancing its possibilities by coupling it with some jQuery? As its name says, this handy plugin provides a lot of front-end validation options and is especially designed to work on projects made with Bootstrap.
→ Info/Download
jQuery Form Plugin
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!
→ Info/Download
Pork Form Validation
Creating forms is one thing, validating the sent data is another. Forms are a sensitive part of a website and as a developer, you must always think about security first. This is why all data sent by forms should be carefully validated.
Pork Form Validation is a php class that handle, as you probably guessed, validation of data sent by forms. If you’re using a PHP framework such as CodeIgniter or Cake PHP you won’t need this as those powerful tools already have plenty of tools to validate data, but in case of a smaller development I definitely love to save time and hassle by using Pork Form Validation.
Here’s a quick example about how it works:
$validations = array(
'name' => 'anything',
'email' => 'email',
'alias' => 'anything',
'pwd'=>'anything',
'gsm' => 'phone',
'birthdate' => 'date');
$required = array('name', 'email', 'alias', 'pwd');
$sanatize = array('alias');
$validator = new FormValidator($validations, $required, $sanatize);
if($validator->validate($_POST)) {
$_POST = $validator->sanatize($_POST);
// now do your saving, $_POST has been sanatized.
die($validator->getScript()."<script type='text/javascript'>alert('saved changes');</script>");
} else {
die($validator->getScript());
}
To validate just one element:
$validated = new FormValidator()->validate('blah@bla.', 'email');
To sanitize just one element:
$sanatized = new FormValidator()->sanatize('<b>blah</b>', 'string');