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 JS Webix library. Sure enough I am glad to share my modest experience and to save it as a guideline of this curious JS UI Framework.  

Second task

First I should specify the logic of user interaction with the form:  

• reading and data validating of the form;
• clearing the form;
• processing buttons clicks;
• interactive messages and confirm boxes;
• adding form data to the table.

You can download the source code here.

You can see the demo application here.

Step 1. New data addition.

To have an easy to read code and to split the project into orderly blocks, I create the functions.js file.

    <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 addItem function. I create it here:

 

const addItem = () =>{                                                       
    var item_data = $$("film_form").getValues();
    $$("film_list").add(item_data);
}

The id of the element is passed to the method $$ to access the element in the Webix library.

The addItem function works as follows: I take the current data from the form with its getValues method and put it to the  item_data variable. Using this data I create a new record in the list with the add method. 

To call this function I set the click property to the Button widget with the Add new value.

 

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: 

Step 2. Form validation. Popup message.

The validation with the validate() method is performed in the addItem function. Besides, I put there the code of the popup message about the successful validation. 

The webix.message() function creates a simple message in Webix. The function accepts the text of the message as a parameter.

const addItem = () =>{        
    if($$("film_form").validate()){                                               
        var item_data = $$("film_form").getValues();
        $$("film_list").add(item_data);    
        webix.message("Validation is successful!");
    }
}

Inside the If condition we access the form and call the validate() 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. 

Popup message: 

Now I should create the rules object in the Form widget. I expect it to satisfy the criteria below:

• the Title field is not empty;
• the Year field is not less than 1970 and more than the current year;
• the Rating field is not zero;
• the Votes field is more than 1 and less than 1000000.

Afterwards, the validation rules of widget source code is:

 

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 name: "…" properties of the form elements. The built-in, 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 user rules. 

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: 

Step 3. Error notification.

There may be the invalidMessage 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:

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:

Step 4. Clearing the form.

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: 

I create the clearForm function and write the following code in it:

 

function clearForm(){
    webix.confirm({
        title:"All data will be lost!",
        text:"Are you sure?"
    }).then( () => {
            $$("film_form").clear();
            $$("film_form").clearValidation();
        }
)};

I use the webix.confirm({…}) 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: clear() to clear the form fields and clearValidation() to remove the validation marks.

Finally, we should connect the function call with the Clear button.

 

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.

Summary

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.