Multi-tabs Form in JavaScript with Validation

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.

I. General Settings

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.

In the web page we add references to the css file that holds the theme we’ve chosen:

<link rel="stylesheet" type="text/css" href="themes/light.css">

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.

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:

<div style="position: absolute; top: 0px; left: 0; right: 0; bottom: 0;">
    <div id="host">
    </div>
</div>

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.

In order to render the TabControl we need a DIV element. So, we create one and give it an id – that is important:

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.

II. Creating the Tab Control and the Tab Pages

In the code-behind file we first add mappings to the two namespaces we want to use:

var ui = MindFusion.UI;
var d = MindFusion.Drawing

Then we create an instance of the TabControl in code this way:

// Create a new TabControl.
var host = new ui.TabControl(document.getElementById("host"));
host.width = new ui.Unit(70, ui.UnitType.Percent);
host.height = new ui.Unit(70, ui.UnitType.Percent);
host.theme = "light";

We use the id of the DIV element in the constructor of the TabControl Then we use the theme property to refer to the theme that we want to use. The value of the theme 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.

We create the first TabPage as an instance of the TabPage class:

// Create four templated tab pages and add them to the host's tabs collection.
var tab1 = new ui.TabPage("Owner Details");
// The HTML of the specified page will be set as the innerHTML of a scrollable div inside the tab content element.
tab1.templateUrl = "page1.html";
host.tabs.add(tab1);

We provide the string that will render in the title of the TabPage in the constructor. Then we set the content that the TabPage will have as a url to the web page that contains it e.g. the TabPage loads a content from a page specified with templateUrl Here is the code for the first page:


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 and here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation.

III. Data Submission and Validation

On the last tab of the form, we have placed a submit button:

We wire the event handler of the click action for this button in the contentLoad event of the fourth tab, where the button is:

tab4.contentLoad.addEventListener(tabLoad);
..........................
..........................
function tabLoad(sender, args) {

    let current_datetime = new Date();
    let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate();
    sender.element.querySelector("#start").value = formatted_date;
    sender.element.querySelector("#submit").addEventListener("click", function () {
    submitData(sender);
    });
}

In the event handler we get the current date and format it the way the default DateTime picker HTML control expects to get it. We get each input control through its id and the querySelector of the HTML Document object. The sender in this case is the fourth tab or tab4.

The method that validates the content is submitData:

function submitData(sender) {
    var txt = "";

    var inputObj = tab4.element.querySelector("#start");

    if (!inputObj.checkValidity()) {
        txt += inputObj.name + ": ";
        txt += inputObj.validationMessage + "
";
        inputObj.style["border-color"] = "red";
        host.selectedItem = tab4;
        dataIsCorrect = false;
    } else
        inputObj.style["border-color"] = "gray";
        ....................................

We use querySelector once again to get the input fields on each page one by one. For each one we see if the validity check has failed. If yes, we outline this field in red and append the validation message to a text variable.

We walk through all tabs and all input fields in this same manner and in reverse order. Our aim is that the first tab with error gets selected, even if there are errors in fields further in the form.

Note that if the field is OK we set its border to the default color. This way we reset the appearance of fields that were previously wrong but the user has corrected.

Finally, we assign the text to the content of the paragraph that renders text in red:

...............................
document.getElementById("error").innerHTML = txt;  

    if (txt.length === 0)
        confirmData();

If no errors have been detected – that means the error text is an empty string – we submit the data. The data submission is handled by the confirmData method:

function confirmData() {

    //first tab
    tab1.element.querySelector("#fname").value = "";
    tab1.element.querySelector("#lname").value = "";
    tab1.element.querySelector("#citizen_id").value = "";
    ........................................
    ........................................
     //fourth tab
    tab4.element.querySelector("#duration").value = "";
    let current_datetime = new Date();
    let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate();
    tab4.element.querySelector("#start").value = formatted_date;

    ui.Dialogs.showInfoDialog("Confirmation", "Your info has been submitted!", null, host.element, host.theme);

}

We reset the values of all input fields and we show an instance of MindFusion InfoDialog to inform the user that their data has been successfully collected.

You can download the source code of the sample and all MindFusion themes and libraries used from this link:

http://mindfusion.eu/samples/javascript/ui/TabForm.zip

You can ask technical question about MindFusion JavaScript developer tools at the online forum at https://mindfusion.eu/Forum/YaBB.pl.

About MindFusion JavaScript UI Tools: MindFusion UI libraries are a set of smart, easy to use and customize JavaScript UI components. Each control boasts an intuitive API, detailed documentation and various samples that demonstrate its use. The rich feature set, multiple appearance options and numerous events make the UI controls powerful tools that greatly facilitate the programmers when building interactive JavaScript applications. MindFusion UI for JavaScript is part of MindFusion JavaScript Pack. You can read details at https://mindfusion.eu/javascript-pack.html.

Virtual Keyboard Controls Added To MindFusion WinForms/WPF Packs

MindFusion UI controls suite now includes a virtual keyboard.

MindFusion UI controls suite now includes a virtual keyboard.

Dear MindFusion current and future clients,
Dear FreezePro clients,

MindFusion is pleased to announce that as of April 2016 it has acquired FreezePro Virtual Keyboard components, which will be released as part of MindFusion WinForms/WPF controls suites. We want to use this opportunity to thank all MindFusion and FreezePro clients for the loyalty – you’ve chosen us over multiple competitive products and we believe you are satisfied with your choice.

To please you even more we offer you special prices for upgrading to MindFusion WinForms/WPF pack. You get a 30% discount on the difference between the price of a component’s license you own and the price of the WinForms/WPF pack license you want to buy. MindFusion clients who already own a WinForms/WPF Pack license get the Virtual Keyboard component free of charge.

If you want to use the preferential upgrade prices please send an e-mail to info@mindfusion.eu no later than May 31st, 2016.

If you have technical questions about any of the components please contact MindFusion at support@mindfusion.eu. Use the same email for questions about licensing or transfer of intellectual property rights.

Welcome to the bigger MindFusion family!

MindFusion WPF Pack

MindFusion.WinForms Pack 2014.R3

MindFusion is pleased to announce the release 2014.R3 of the Pack for WinForms component suite. Here is an overview of the new features:

diagram16x16MindFusion.Diagramming

Export to Visio 2013 files
The new Visio2013Exporter class lets you export the contents of Diagram and DiagramDocument objects to Visio 2013 VSDX files. You must add a reference to the MindFusion.Diagramming.Export.Visio.dll assembly beforehand. Further details on how to use the Visio2013Exporter can be found in the forum or the online help.

Headers and Footers in PDF
You can now add a header and a footer to all exported to PDF pages. Their content and font are customizable – use HeaderFormat, HeaderFont, FooterFormat and FooterFont to do it.

The PdfExporter

The PdfExporter

Calendar-16x16MindFusion.Scheduling

New Holiday Providers
You can use one of the new holiday providers, added to the MindFusion.HolidayProviders.dll assembly – FranceHolidayProvider, GermanyHolidayProvider, RussiaHolidayProvider, and UKHolidayProvider.

Miscellaneous

  • A new Drawing event enables custom drawing of calendar elements before their default rendering.
  • Improved support for partial databinding.

Spreadsheet-16x16MindFusion.Spreadsheet

Export to XLSX (Office Open XML) format
Use the new ExcelExporter class to export MindFusion.Spreadsheet Workbook objects to Excel. To export a workbook to XLSX, create an instance of the ExcelExporter class and call its Export method, passing the Workbook object as parameter.

Export to ODS (OpenDocument Spreadsheet) format
The new CalcExporter class lets you export MindFusion.Spreadsheet Workbook objects to the OpenDocument format. To export a workbook, create an instance of the CalcExporter class and call its Export method, passing the Workbook object as parameter.

Export to XHTML and MHTML format
Two new classes – HtmlExporter and MhtmlExporter – let you export MindFusion.Spreadsheet Workbook objects to (X)HTML and MHTML files. To export a workbook, create an instance of the respective exporter class and call its Export method, passing the Workbook object as parameter.

Export to XHTML.

Export to XHTML.

Moving cell ranges
You can move cells and cell ranges programmatically as well interactively. In order to move a column/row programmatically you should call one of the Move overloads of the of the ColumnCollection or RowCollection classes respectively, and specify the column/row to move and the desired location. To move columns or rows interactively, select the columns or rows entirely, click on any of the selected column or row headers and drag.

Find and replace
You can now use a variety of methods to search and replace texts. For searching, use the Find and FindAll methods. For replacing text use Replace and ReplaceAll. The new FindReplaceForm class (contained in the MindFusion.Spreadsheet.WinForms.StandardForms.dll assembly) can be used to facilitate search and replace operations inside a workbook.

Improved in-place editing
In-place formula editing has been extended with automatic literal, string, cell and cell range coloring
and context-sensitive tooltip information for functions.

In-place editing.

In-place editing.

Miscellaneous

  • The parameters of the Export methods of some exporters have been reordered to improve consistency. Now the Worksheet/Workbook being exported is always the first argument.
  • The HyperlinkForm constructors now require an addition argument of type Workbook.
  • New PageOrientation property added to the PdfExporter class.

uiMindFusion.UI

DockControl
Layout serialization has been added to the DockControl.

The trial version is available for direct download from this link:

Download MindFusion.WinForms Pack 2014.R3

If you run into problems with any of the components, please let us know. We shall be glad to assist you. MindFusion is proud with its excellent technical support – the majority of the questions are answered within hours of receiving them.

About MindFusion.WinForms Pack: A set of five WinForms programming components that provide your application with a rich choice of diagramming, charting, scheduling, mapping, reporting and gauge features. The tools are very easy to implement and use. They boast intuitive API and various step-by-step tutorials to get you started. Both online and offline documentation is available.

A sample browser presents you with all the samples for each control to let you easily navigate to what you need. You can check some of the features of each component right now if you look at the online demos:

Visit the features – page of the components for more information about their capabilities:

You can check the prices and licensing scheme here. All components are royalty-free.

MindFusion Pack for WinForms 2014.R2

MindFusion has just released Pack for WinForms 2014.R2. The most important new features in the components are listed below:

diagram16x16MindFusion.Diagramming

Resize of multiple nodes

Now you can resize multiple selected nodes simultaneously – just set the AllowMultipleResize property to true. When enabled, dragging a corner or any side adjustment handle of a node, resizes all nodes in the selection.

Visio2013Importer improvements

  • The Item argument of ImportItem event handlers is now pre-set to a DiagramItem instance created for the imported Visio shape, letting you avoid parsing some standard data such as Bounds or Text. You can either modify this item’s properties, or replace it with a new instance of a different type.
  • several bugs and crashes have been fixed

Miscellaneous

  • LinkLabels are now copied by the DiagramLink copy constructor and clipboard methods.
  • DiagramView.ZoomFactor setter no longer automatically aligns its value to ZoomControl zoom steps. This avoids imprecise ZoomToFit results.
  • a few API changes have been made.

Spreadsheet-16x16MindFusion.Spreadsheet

The new version fixes several bugs and offers improved binary and XML serialization. The new version is not compatible with old binary and XML formats.

UI-16x16MindFusion.UI

A DockControl (beta version) has been added to the pack.

The dock control for WinForms

The dock control for WinForms

The trial version is available for direct download from this link:

Download MindFusion.WinForms Pack 2014.R2

If you run into problems with any of the components, please let us know. We shall be glad to assist you. MindFusion is proud with its excellent technical support – the majority of the questions are answered within hours of receiving them.

About MindFusion.WinForms Pack: A set of five WinForms programming components that provide your application with a rich choice of diagramming, charting, scheduling, mapping, reporting and gauge features. The tools are very easy to implement and use. They boast intuitive API and various step-by-step tutorials to get you started. Both online and offline documentation is available. A sample browser presents you with all the samples for each control to let you easily navigate to what you need. You can check some of the features
of each component right now if you look at the online demos:

Visit the features – page of the components for more information about their capabilities:

You can check the prices and licensing scheme here. All components are royalty-free.

MindFusion.WinForms Pack, 2013.R2

MindFusion has released a new version of its pack for WinForms. Here is an overview of the new features:

chartMindFusion.Charting

Pie chart interactions

You can now resize every 2D or 3D pie chart by dragging the border between each two adjacent pieces with the mouse. The HitTestAngleOffset property lets you specify the deviation, in degrees, at which a click around the pieces border would still be considered a click on the border.

Mouse dragging in a pie chart.

Mouse dragging in a pie chart.

Support for undefined data values

You can add null (undefined) data values to all charts. The HandleEmptyValue property and the HandleEmptyValue enumeration specify the various ways null values can be handled.

ToolTips

You can now show tooltips for all chart types. In Area charts, tooltips can be displayed for every section between each two adjacent points.

Themes

Chart themes are now represented as XML files and we provide you with an initial set of 8. You can use the SaveTheme and LoadTheme methods to save/load a theme. There is also a theme editor control that lets you create, save and preview themes fast and easy.

Major/minor axis ticks

You can divide all chart axes more precisely using the new MajorTickLength and MinorTickLength properties. When their value is greater than zero, ticks are drawn not only at the axis intervals but also among them. You can customize the number of minor ticks with the MinorTicksPerInterval property.

Miscellaneous

  • Hit testing has been imrpoved in 3D cylinders and area charts
  • custom number formatting has been added to all numeric labels
  • several API changes were introduced

diagram16x16MindFusion.Diagramming

Support for Mono

You can use MindFusion.Diagramming component under the Mono runtime for OSX or Linux. A single version of the mindfusion.* assemblies can be referenced by both Mono and Microsoft .NET applications. The control detects what runtime has loaded it, and provides alternative implementations for features that are currently missing from Mono.

Custom measure units

The type of the MeasureUnit property has been changed from GraphicsUnit enum to MeasureUnit class. This class lets you define custom units by specifying their dots-per inch resolution, a string name, and number of standard divisions for display in the Ruler control. There are two new predefined units available out of the box: Centimeter and WpfPoint.

Shape control points

You can parameterize Shape formulas by associating control points with Shape objects. Each control point is passed to the shape script as a named variable. You can also specify the default, min and max coordinates for each parameter via the ShapeControlPoint constructor, and whether to treat its values as percents or fixed offset.

ContainerNode improvements

  • Child nodes are now drawn by their containers; when containers overlap, the children of a lower container cannot appear in front of the upper container anymore;
  • The ClipChildren property specifies whether to clip child items to container’s boundaries;
  • The ZIndex property no longer changes automatically when dropping nodes into a container;
Container nodes in Diagramming for WinForms

Container nodes in Diagramming for WinForms

Import OpenOffice Draw files

The DrawImporter class can import .odg files, created by the OpenOffice Draw vector graphics editor. In order to use it, you must add a reference to the MindFusion.Diagramming.Import.Draw.dll assembly. Various overloads of the Import method can be used to import the OpenOffice drawing into a DiagramDocument whose pages correspond to the Draw pages, or into a single Diagram whose content is merged from all imported pages.

PdfExporter improvements

  • Improved handling of clip regions in custom drawing code;
  • PdfExporter now honors the target Rectangle property of linear gradients;
  • PDF shadings now include all colors from a ColorBlend;

New events

  • The SetSelfLoopShape event is raised when a link becomes a self-loop, giving you a chance to set a custom shape for the link;
  • QueryAlignTarget event is raised to determine if a node should be used as alignment guide target when AutoAlignNodes is enabled;

Report-16x16 MindFusion.Reporting

Several bug fixes and improvements.

Calendar-16x16 MindFusion.Scheduling

Several new members have been added:

  • Calendar.FilterItem event
  • Calendar.SetViewport method
  • ResourceViewSettings.EnableCollisions property

You can read more details about the new features of each component at the forum. Use the link below to download the trial version of the control:

Download MindFusion.WinForms Pack 2013.R2

If you run into problems with any of the components, please let us know. We shall be glad to assist you. MindFusion is proud with its excellent technical support – the majority of the questions are answered within hours of receiving them.

About MindFusion.WinForms Pack: A set of five WinForms programming components that provide your application with a rich choice of diagramming, charting, scheduling, mapping, reporting and gauge features. The tools are very easy to implement and use. They boast intuitive API and various step-by-step tutorials to get you started. Both online and offline documentation is available. A sample browser presents you with all the samples for each control to let you easily navigate to what you need. You can check some of the features of each component right now if you look at the online demos:

Visit the features – page of the components for more information about their capabilities:

You can check the prices and licensing scheme here. All components are royalty-free.