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 |
리턴 | void |