JavaScript Webix library through the eyes of a freshman. Part 2. Dealing with forms.
Tags: javascript, webdev
Published: 2020-03-09 08:50:06

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wh91kpzmwakmykwdoou0.png)

My career in front-end developing has just started. Currently, I am on a trial period in one of the IT companies in Minsk. I am exploring the subtleties of the web-ui development on the basis of the <a href="https://webix.com/">JS Webix library</a>. Sure enough I am glad to share my modest experience and to save it as a guideline of this curious JS UI Framework.  

<h2>Second task</h2>

First I should specify the logic of user interaction with the form:  
<ul>
    <li><a href="https://docs.webix.com/api__values_getvalues.html">reading</a> and <a href="https://docs.webix.com/desktop__data_validation.html">data validating of the form</a>;</li>
    <li><a href="https://docs.webix.com/api__values_clear.html">clearing the form</a>;</li>
    <li><a href="https://docs.webix.com/api__link__ui.proto_click_config.html">processing buttons clicks</a>;</li>
    <li><a href="https://docs.webix.com/desktop__message_boxes.html">interactive messages</a> and <a href="https://docs.webix.com/api___confirm.html">confirm boxes</a>;</li>
    <li><a href="https://docs.webix.com/api__link__ui.proto_add.html">adding form data</a> to the table.</li>
</ul>

You can download the source code <a href="https://github.com/sashko-web/webix/tree/master/Webix%20first%20task">here</a>.

You can see the demo application <a href="https://snippet.webix.com/17w1dodb">here</a>.

<h2>Step 1. New data addition.</h2>
To have an easy to read code and to split the project into orderly blocks, I create the functions.js file.
```html

    <script src="d ata.js"></script>
    <script src="functions.js"></script>
    <script src="script.js"></script>

```
New data is added to the table with the <strong>addItem</strong> function. I create it here: 
```javascript
const addItem = () =>{                                                       
    var item_data = $$("film_form").getValues();
    $$("film_list").add(item_data);
}
```
The id of the element is passed to the <strong>method $$</strong> to access the element in the Webix library.

<blockquote>
The addItem function works as follows: I take the current data from the form with its <a href="https://docs.webix.com/api__values_getvalues.html">getValues method</a> and put it to the  item_data variable. Using this data I create a new record in the list with the <a href="https://docs.webix.com/api__link__ui.proto_add.html">add method</a>. 
</blockquote>

To call this function I set the <a href="https://docs.webix.com/api__link__ui.proto_click_config.html">click</a> property to the Button widget with the Add new value. 
```javascript
margin:10,
cols:[
    { view:"button", id:"btn_add", value:"Add new", css:"webix_primary",
    click:addItem},
    { view:"button", id:"btn_clear", value:"Clear"}
 ]
```
Consequently, the data is added to the table: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wem8lwz9xy65zt47z55v.png)
<h2>Step 2. Form validation. Popup message.</h2>
The validation with the <a href="https://docs.webix.com/desktop__data_validation.html">validate() method</a> is performed in the addItem function. Besides, I put there the code of the popup message about the successful validation. 

The <a href="https://docs.webix.com/desktop__message_boxes.html">webix.message()</a> function creates a simple message in Webix. The function accepts the text of the message as a parameter.
```javascript
const addItem = () =>{        
    if($$("film_form").validate()){                                               
        var item_data = $$("film_form").getValues();
        $$("film_list").add(item_data);    
        webix.message("Validation is successful!");
    }
}
```
<blockquote>
Inside the <strong>If</strong> condition we access the form and call the <strong>validate()</strong> method. If the check is successful the method returns true and the code runs further. As soon as the data is added to the table, the message "Validation is successful!" shows up. 
</blockquote>
Popup message: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pt5b51fssrbzgfourp84.png)
Now I should create the <a href="https://docs.webix.com/desktop__data_validation.html#validationrules">rules</a> object in the Form widget. I expect it to satisfy the criteria below:

<ul>
   <li>the Title field is not empty;</li>
   <li>the Year field is not less than 1970 and more than the current year;</li>
   <li>the Rating field is not zero;</li>
   <li>the Votes field is more than 1 and less than 1000000.</li>
</ul>

Afterwards, the validation rules of widget source code is: 
```javascript
view:"form",
id:"film_form",
width: 350,
elements:[
    { type:"section", template:"EDIT FILMS"},
    { view:"text", name:"title", label:"Title" },
    { view:"text", name:"year", label:"Year" },
    { view:"text", name:"rating", label:"Rating" },
    { view:"text", name:"votes", label:"Votes" }, 
    {
        margin:10, cols:[
            { view:"button", id:"btn_add", value:"Add new", 
            css:"webix_primary", click:addItem},
            { view:"button", id:"btn_clear", value:"Clear" }
        ]
    },
    {}
],
rules:{
    title: webix.rules.isNotEmpty,
    rating(value){
        if(webix.rules.isNumber(value)){
            return true;
        }
    },
    votes(value){
        return value < 1000000 && value >= 1;
    },
    year(value){
        return value>=1970 && value <= new Date().getFullYear();
    }
}
```
The properties of the rules object should correspond to the values of the <strong>name: "…"</strong> properties of the form elements. The <a href="https://docs.webix.com/desktop__data_validation.html#predefinedrules">built-in</a>, namely webix.rules.isNotEmpty and webix.rules.isNumber are set in the Title, Rating and Votes fields. In the Year property there is the function which determines the <a href="https://docs.webix.com/desktop__data_validation.html#customrules">user rules</a>. 

The form is validated when all the properties of the Rules object return true. Otherwise, the fields with failed validation are highlighted red.

The result is here: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vtj98qqk87jacp34uw6r.png)
<h2>Step 3. Error notification.</h2>
There may be the <a href="https://docs.webix.com/api__link__ui.texthighlight_invalidmessage_config.html">invalidMessage</a> property in the fields. The text of the error message is its value. The message shows up below the field if the validation is not successful. 

Code:
```javascript
elements:[
    { type:"section", template:"EDIT FILMS"},
    { view:"text", name:"title", label:"Title", 
    invalidMessage:"Must be filled in"},
    { view:"text", name:"year", label:"Year", 
    invalidMessage:"Should be between 1970 and current" },
    { view:"text", name:"rating", label:"Rating", 
    invalidMessage:"Cannot be empty or 0" },
    { view:"text", name:"votes", label:"Votes", 
    invalidMessage:"Must be less than 100000" }, 
    {
        margin:10, cols:[
            { view:"button", id:"btn_add", value:"Add new", 
            css:"webix_primary", click:addItem },
            { view:"button", id:"btn_clear", value:"Clear" }
        ]
    },
    {}
]
```
Result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qlb7lsfqfg8bo4jaemot.png)
<h2>Step 4. Clearing the form.</h2>
To clear the form we create the function which is called by clicking on the Clear button. The function first shows a confirmation box.

Confirm box: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8q546vf4gxg0j56sp9t1.png)

I create the clearForm function and write the following code in it: 
```javascript
function clearForm(){
    webix.confirm({
        title:"All data will be lost!",
        text:"Are you sure?"
    }).then( () => {
            $$("film_form").clear();
            $$("film_form").clearValidation();
        }
)};
```
I use the <a href="https://docs.webix.com/api___confirm.html">webix.confirm({…})</a> method for the confirmation box. The method accepts the object with the text and title properties. If the answer is positive I call two methods in the handler .then: <a href="https://docs.webix.com/api__values_clear.html">clear()</a> to clear the form fields and <a href="https://docs.webix.com/api__link__ui.proto_clearvalidation.html">clearValidation()</a> to remove the validation marks.

Finally, we should connect the function call with the Clear button. 
```javascript
margin:10, cols:[
    { view:"button", id:"btn_add", value:"Add new", 
    css:"webix_primary", click:addItem},
    { view:"button", id:"btn_clear", value:"Clear",
    click:clearForm}
]
```
You can see both the code and the demo at https://snippet.webix.com/17w1dodb.
<h2>Summary</h2>
The form interaction demonstrates only elemental methods. However, it is still visible that Webix suggests a succinct, legible and comprehensive code for the dynamic page. Obviously, the JavaScript code loses in the length.