{"id":2242,"date":"2019-12-23T16:29:31","date_gmt":"2019-12-23T16:29:31","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2242"},"modified":"2021-01-25T16:07:27","modified_gmt":"2021-01-25T16:07:27","slug":"multi-tabs-form-in-javascript-with-validation","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/multi-tabs-form-in-javascript-with-validation\/","title":{"rendered":"Multi-tabs Form in JavaScript with Validation"},"content":{"rendered":"

In this blog post we will create a form that spans over several tabs. Each tab contains input fields for a specific type of information. There are placeholders and restrictions for each input field. If the provided data is not correct we display a guiding message and select the first tab that has wrong data. All incorrect fields are outlined with red.<\/p>\n

<\/a><\/p>\n

I. General Settings<\/h2>\n

We will use two files for our form – one is a web page and the other a JavaScript file that will hold all JavaScript code for the sample. They both are names TabForm.<\/p>\n

In the web page we add references to the css file that holds the theme we’ve chosen:<\/p>\n

<link<\/span> rel<\/span>=\"stylesheet<\/a>\" type<\/span>=\"text\/css<\/a>\" href<\/span>=\"themes\/light.css<\/a>\"><\/pre>\n
This is the CSS for the light theme of the MindFusion JavaScript UI controls. There are various themes provided out-of-the-box with the library and you can choose another one.<\/p>\n
Then, at the bottom of the web page, before the closing BODY tag we add references to the three JavaScript files that we want to use:<\/p>\n
<div<\/span> style<\/span>=\"position: absolute; top: 0px; left: 0; right: 0; bottom: 0;<\/a>\">\n<\/span>    <div<\/span> id<\/span>=\"host<\/a>\">\n<\/span>    <\/div<\/span>>\n<\/span><\/div<\/span>><\/pre>\n
The first two of them point to the libraries of the UI controls: MindFusion.Common and MindFusion.UI. The other is a reference to the JS code-behind file.<\/p>\n
In order to render the TabControl<\/a> we need a DIV element. So, we create one and give it an id – that is important:<\/p>\n
\n
<\/div>\n<\/div>\n
We also add a paragraph with an id and red stroke – it will render text, that describes the error fields and the validation message for each one – if the user has provided wrong data.<\/p>\n
II. Creating the Tab Control and the Tab Pages<\/h2>\n
In the code-behind file we first add mappings to the two namespaces we want to use:<\/p>\n
var ui = MindFusion.UI;\nvar d = MindFusion.Drawing<\/pre>\n
Then we create an instance of the TabControl<\/a> in code this way:<\/p>\n
\/\/ Create a new TabControl.\nvar host = new ui.TabControl(document.getElementById(\"host\"));\nhost.width = new ui.Unit(70, ui.UnitType.Percent);\nhost.height = new ui.Unit(70, ui.UnitType.Percent);\nhost.theme = \"light\";<\/pre>\n
We use the id of the DIV element in the constructor of the TabControl<\/a> Then we use the theme<\/a> property to refer to the theme that we want to use. The value of the theme<\/a> property should be the same as the name of the CSS ile that we referenced in the web page. It can point to a custom theme that you have created as long as the names of the file and the property value match.<\/p>\n
We create the first TabPage<\/a> as an instance of the TabPage<\/a> class:<\/p>\n
\/\/ Create four templated tab pages and add them to the host's tabs collection.\nvar tab1 = new ui.TabPage(\"Owner Details\");\n\/\/ The HTML of the specified page will be set as the innerHTML of a scrollable div inside the tab content element.\ntab1.templateUrl = \"page1.html\";\nhost.tabs.add(tab1);<\/pre>\n
We provide the string that will render in the title of the TabPage<\/a> in the constructor. Then we set the content that the TabPage<\/a> will have as a url to the web page that contains it e.g. the TabPage<\/a> loads a content from a page specified with templateUrl<\/a> Here is the code for the first page:<\/p>\n
<\/pre>\n
In terms of HTML, we have provided each input element with an id, a placeholder value and the necessary restrictions that will validate its content. We strictly use and follow the Validation API of JavaScript, which you can check here: https:\/\/www.w3schools.com\/js\/js_validation_api.asp<\/a> and here https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/HTML\/HTML5\/Constraint_validation<\/a>.<\/p>\n
III. Data Submission and Validation<\/h2>\n
On the last tab of the form, we have placed a submit button:<\/p>\n