Form

Download Form Module
Version 1.5

The form module is used to optimize and reduce the development time of the forms. For utilization of the Form module, the below pattern is needed. 

var form = new Form(mode, model, jTarget, data, cioPath, options);
form.render();
Parameters Type Description
mode String The first parameter in the form module is the "mode" which is used to determine the form type. The "mode" can have three options, which will be explained below:
  • create: When we want to create an empty form to get the data from users, we set the mode to "create".
  • edit: This mode is for when we want to allow user to edit the previously saved form.
  • view: This mode is for when we want to allow user to just view the filled form.
model Object As we explained in the model module, we write the form fields in the model.json file, and save it in CloadIO. Then in this section, after getting the model from CloadIO and local caching, we write the exact path of our form in the model.json.
For example, we had written a model.json file in the model module. And we caching it in the app.local.model.
jTarget Object In this argument, we write the jquery path of where we want the form to be shown.
data Object Optional. It is the data obtained from filling out forms. When the mode is "create", it is clear that our form has no data because the form data is empty, but when our mode is "view" or "edit", obviously we have cached data. If we don't have cached data, the data parameter should be "null".
In the following example, suppose that we don't have cached data. So we should write "null" instead of the data argument.
cioPath String In this section, we enter the data path. The cioPath is a data storing path in CloadIO. So when we want to get data from CloadIO we use the cioPath.
options Object Optional. This section is for module customization. For that purpose, there are some events that we have explained how you can use in the following. If don't need customization, you can remove the last argument.

options: There are several important events in the option argument that we use each one to custom our form.

Parameters Type Description
beforeItemRendered Function The first event is beforeItemRendered, this event is used to field customization before the form rendering. So this has two arguments, the first argument refers to key of the field that we want to customize it and the next one refers to field properties.
onItemRendered Function The second event is onItemRendered, this event is used when we want to custom form fields during the form is rendered. This has four arguments, the first argument refers to key of the field, the second argument refers to field properties, the third part is jQuery of the form and the last one is the value of the field.
onValueChanged Function The third event is onValueChanged, this event is used when the value of the field is going to change. This has four arguments, which the first argument refers to key of the field and the next one refers to field properties, the third argument is the jquery path of the field and the last one has two choices, the first one is 'value', and the next is 'options'. The 'options' argument contains type and event objects.
  • value: It contains the data of a field.
  • options.type: This has two values, add and remove. The 'add' is for sometimes you add a file or picture to form and want to customize it. The remove is like that too. When we want to remove an image or a file, and we need some customization about it, we can use the remove a parameter for this purpose.
  • options.event: This is for when we are uploading an image, so we access the whole information of that file and we can customize it.
beforeValueChanged Function The next event is beforeValueChanged, this event is used before the value of the field will be changed. So this has four arguments, which the first argument refers to key of the field and the next one refers to field properties, the third argument is the jquery path of the field and the last one has two choices, the first one is 'value' and the next is 'options'. Also, options contain type objects.
  • value: It contains the data of a field.
  • options.type: This has two values, add and remove. The 'add' is for sometimes you add a file or picture to form and want to customize it. The remove is like that too. When we want to remove an image or a file, and we need some customization about it, we can use the remove a parameter for this purpose.
beforeFieldValidated Function The next event is beforeFieldValidated, this event is used when we want to custom form fields before form validation. So this has four arguments, which the first argument refers to key of the field and the next one refers to field properties, the third argument is the jquery path of the field and the last one is data of the form.
onFormValidated Function The sixth event is onFormValidated, this event is used when we want to custom form fields when the form is validating. So this has just a data argument that refers to data of the form.
beforeRecordSaved Function Another event is beforeRecordSaved, this event is used when we want to custom form fields before saving form. So this has two arguments, which the first is the path of saved data and the second is data of the form.
onRendered Function The last event is onRendered, this event is used when the form is rendering. This has no parameter.

Example

For testing the events first, add the following code intoindex.html 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css"> 
    </head>
    <body>
        <div class="page home"> 
            <div class="formWrapper"><div> 
        </div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/form/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
</html>

So add the follwing codes intohome.js

beforeItemRendered 

new Form('edit', app.local.model.common.client, $('.page.home > .formWrapper'), null, '/example/' + app.auth.user.key, {
    beforeItemRendered: function (fieldKey, field) {
        // you can customize your field here
    }
}).render();

onItemRendered 

new Form('edit', app.local.model.common.client, $('.page.home > .formWrapper'), null, '/example/' + app.auth.user.key, {
    onItemRendered: function (fieldKey, field, jField, value) {
        // you can customize your field here
    }
}).render();

onValueChanged 

new Form('edit', app.local.model.common.client, $('.page.home > .formWrapper'), null, '/example/' + app.auth.user.key, {
    onValueChanged: function (fieldKey, field, jField, value) {
        // you can customize your field here
    }
}).render();

beforeValueChanged 

new Form('edit', app.local.model.common.client, $('.page.home > .formWrapper'), null, '/example/' + app.auth.user.key, {
    beforeValueChanged: function (fieldKey, field, jField, options) {
        // you can customize your field here
    }
}).render();

beforeFieldValidated 

new Form('edit', app.local.model.common.client, $('.page.home > .formWrapper'), null, '/example/' + app.auth.user.key, {
    beforeFieldValidated: function (fieldKey, field, jField, data) {
        // you can customize your field here
    }
}).render();

onFormValidated 

new Form('edit', app.local.model.common.client, $('.page.home > .formWrapper'), null, '/example/' + app.auth.user.key, {
    onFormValidated: function (data) {
        // you can customize your field here
    }
}).render();

beforeRecordSaved 

new Form('edit', app.local.model.common.client, $('.page.home > .formWrapper'), null, '/example/' + app.auth.user.key, {
    beforeRecordSaved: function (path, data) {
        // you can customize your field here
    }
}).render();

onRendered 

new Form('edit', app.local.model.common.client, $('.page.home > .formWrapper'), null, '/example/' + app.auth.user.key, {
    onRendered: function () {
        // you can customize your field here
    }
}).render();

Notice

Notice that you can use all of events and options in your codes together.