Client-side validation, when enabled, occurs on the "onsubmit" event of the form.
create a new form
$form = new Zebra_Form('my_form');
disable client-side validation
$form->clientside_validation(false);
enable client-side validation using default properties
$form->clientside_validation(true);
enable client-side validation using customized properties
$form->clientside_validation(array(
'close_tips' => false, // don't show a "close" button on tips with error messages
'on_ready' => false, // no function to be executed when the form is ready
'disable_upload_validation' => true, // using a custom plugin for managing file uploads
'scroll_to_error' => false, // don't scroll the browser window to the error message
'tips_position' => 'right', // position tips with error messages to the right of the controls
'validate_on_the_fly' => false, // don't validate controls on the fly
'validate_all' => false, // show error messages one by one upon trying to submit an invalid form
));
To access the JavaScript object and use the public methods provided by it, use $('#formname').data('Zebra_Form')
where formname is the form's name with any dashes turned into underscores!
Therefore, if a form's name is "my-form", the JavaScript object would be accessed like $('my_form').data('Zebra_Form').
From JavaScript, these are the methods that can be called on this object:
- attach_tip(element, message) - displays a custom error message, attached to the specified jQuery
element
- clear_errors() - hides all error messages;
- submit() - submits the form;
- validate() - checks if the form is valid; returns TRUE or FALSE;
if called with the "false" boolean argument, error messages will
not be shown in case form does not validate
Here's how you can use these methods, in JavaScript:
let's submit the form when clicking on a random button
get a reference to the Zebra_Form object
var $form = $('#formname').data('Zebra_Form');
handle the onclick event on a random button
$('#somebutton').bind('click', function(e) {
stop default action
e.preventDefault();
validate the form, and if the form validates
if ($form.validate()) {
do your thing here
when you're done, submit the form
$form.submit();
}
if the form is not valid, everything is handled automatically by the library
});
| public clientside_validation ( mixed $properties ) : void | ||
| $properties | mixed | Can have the following values:
- FALSE, disabling the client-side validation;
Note that the {@link Zebra_Form_Control::set_rule() dependencies} rule will
still be checked client-side so that callback functions get called, if it is
the case!
- TRUE, enabling the client-side validation with the default properties;
- an associative array with customized properties for the client-side validation;
In this last case, the available properties are:
- close_tips, boolean, TRUE or FALSE Specifies whether the tips with error messages should have a "close" button or not Default is TRUE. - disable_upload_validation, boolean, TRUE or FALSE Useful for disabling all client-side processing of file upload controls, so that custom plugins may be used for it (like, for instance, {@link http://blueimp.github.io/jQuery-File-Upload/basic.html this one}) Default is FALSE. - on_ready, JavaScript function to be executed when the form is loaded. Useful for getting a reference to the Zebra_Form object after everything is loaded.
$form->clientside_validation(array(
// where $form is a global variable and 'id' is the form's id
'on_ready': 'function() { $form = $("#id").data('Zebra_Form'); }',
));
- scroll_to_error, boolean, TRUE or FALSESpecifies whether the browser window should be scrolled to the error message or not. Default is TRUE. - tips_position, string, left, right or center Specifies where the error message tip should be positioned relative to the control. Default is left. - validate_on_the_fly, boolean, TRUE or FALSE Specifies whether values should be validated as soon as the user leaves a field; if set to TRUE and the validation of the control fails, the error message will be shown right away Default is FALSE. - validate_all, boolean, TRUE or FALSE Specifies whether upon submitting the form, should all error messages be shown at once if there are any errors Default is FALSE. @return void |
| return | void | |
function page_add_bookmark()
{
$form = new Zebra_Form('form');
$form->clientside_validation(array('close_tips' => true, 'on_ready' => false, 'disable_upload_validation' => true, 'scroll_to_error' => false, 'tips_position' => 'right', 'validate_on_the_fly' => true, 'validate_all' => true));
$form->add('label', 'label_url', 'url', 'URL');
$url = $form->add('text', 'url', 'http://');
$url->set_rule(array('required' => array('url_error', 'URL musí být vyplněno.'), 'url' => array(true, 'url_error', 'Pole musí obsahovat platné URL (včetně protokolu).')));
$form->add('label', 'label_title', 'title', 'Název stránky');
$title = $form->add('text', 'title', '');
$title->set_rule(array('required' => array('title_error', 'Název musí být vyplněn.')));
$form->add('submit', 'submitbtn', 'Přidat');
if ($form->validate()) {
$ok = model_add($_POST['url'], $_POST['title'], array());
if ($ok) {
flash('info', 'Záložka byla vytvořena');
} else {
flash('error', 'Záložku se nepodařilo vytvořit.');
}
redirect_to('/');
}
// set('form', $form->render('views/add_form.php', true));
set('form', $form->render('', true));
set('title', 'Nová záložka');
return html('add.html.php');
}
/**
Sets the formulary and returns the values of the fields
*/
function form()
{
require_once './forms/Zebra_Form.php';
// instantiate a Zebra_Form object
$form = new Zebra_Form('form');
$form->clientside_validation(true);
// the label for the "query" element
$form->add('label', 'label_query', 'query', 'Query');
// add the "query" element
$obj =& $form->add('text', 'query', '', array('autocomplete' => 'off'));
// set rules
$obj->set_rule(array('required' => array('error', 'Se necesita una query')));
// "Return Per page"
$form->add('label', 'label_returnpp', 'returnpp', 'Numero de Tweets');
$obj =& $form->add('text', 'returnpp', 10, array('autocomplete' => 'off'));
$obj->set_rule(array('digits' => array('', 'error', 'El valor ha de ser un entero'), 'length' => array(0, 3, 'error', 'El numero es demasiado grande'), 'custom' => array('is_valid_number', 'error', 'El numero de Tweets debe ser menor de 500')));
// "Result Type"
$form->add('label', 'label_type', 'type', 'Tipo de resultado:');
$obj =& $form->add('select', 'type', 'mixed');
$obj->add_options(array('mixed' => 'Mixto', 'recent' => 'Reciente', 'popular' => 'Popular'), true);
// "submit"
$form->add('submit', 'btnsubmit', 'Buscar Tweets');
// if the form is valid
if ($form->validate()) {
$values = array();
foreach ($_POST as $key => $value) {
if (strpos($key, 'name_') !== 0 && strpos($key, 'timer_') !== 0 && strpos($key, 'response_') !== 0) {
$values[$key] = $value;
// echo $key . " " . $values[$key] . "<br>";
}
}
$_SESSION["values"] = $values;
header("Location: sentwittment.php");
exit;
// otherwise
} else {
// generate output using a custom template
$form->render('*horizontal');
}
}
