Ivan Petrenko

Ivan Petrenko

1651655242

Overview of JavaScript Form Widgets - DZone Web Dev

Overview of JavaScript Form Widgets

A web form is probably the main communication channel between a user and a web application. It commonly serves for gathering important information from end-users that can trigger updates on the client-side or be stored in the database on the server-side. Poorly designed or confusing forms can cause a lot of inconvenience to end-users and application owners. Therefore, it is necessary to pay serious attention to the proper implementation of forms and their features such as labels, notifications, validation rules, etc.

The task of integrating forms like any other interface elements into web apps can be significantly simplified by utilizing JavaScript UI libraries. Such tools are very popular among programmers, as they help to accelerate the development process and reduce the number of errors in the codebase.

In this article, we will consider form widgets and form-related controls included in popular UI libraries.

#web-development #JavaScript #webapp  #forms

DHTMLX Form

DHTMLX Suite provides a range of widgets for seamlessly adding feature-packed UI components to any web project. The list of available solutions includes a cross-browser JavaScript/HTML5 Form. It enables you to use 14 various form controls and group them in the desired way for building forms of any complexity. Apart from standard elements (input fields, checkboxes, action buttons, etc.), your form can contain a file uploader, slider, datepicker, and other useful controls from the Suite package. Predefined validation rules and notification messages ensure that users submit only valid data. Notification messages help to avoid any misconceptions during the form completion. If necessary, you can also disable any form options or hide them. 

 

DHTMLX online exam system demo

A rich API of DHTMLX Form allows you to customize forms in accordance with your project requirements. For instance, textual data in form labels can be displayed in various languages to be understood by users from different countries. Any styling adjustments are performed via CSS. The initialization process of this widget takes just a few simple steps.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

Webix Form

Webix delivers a collection of UI widgets for creating various parts of a user interface, including forms. The Form widget helps to obtain any kind of information from users and transfer it for further processing with the help of numerous controls and the validation feature. It is possible to set a common configuration for all form controls. If your form should include a particular number of digits/vowels (credit cards, telephone numbers, etc.), you can specify a pattern for formatting inputted data. It is not a problem to disable form elements or switch to the read-only mode.

The Form widget can be combined with other Webix components for displaying complex forms. You can separate a big form into logical parts and attach to them text labels using Fieldset and Section components. Another option is to divide a form with the help of tabs and segmented buttons, thereby forming a multiview layout. Webix data widgets (e.g. List) employ the Form as editors. Webix also offers the HTMLForm widget that allows you to upgrade simple HTML forms with the Webix Form API and also use it with other Webix widgets. You can also benefit from using a special Webix tool (Form Builder) for generating forms. 

Compatible with: Angular, React, Vue.js, Backbone

Useful resources: documentation, samples

Kendo UI Form

The Form component is a part of the Kendo UI library. It is intended for generating and managing forms in web applications. This UI tool comes with a number of configuration and customization options to facilitate the implementation process.

In addition to the default layout, you can apply the grid layout (up to 12 columns) in your form. This option is supported only in modern browsers. Positioning of form elements in a more intuitive manner is achieved with the grouping function. There are two modes for showing form labels (vertical and horizontal). The Kendo form comes with a customizable built-in validator. This important feature is set in action on the submission and can include the validation summary i.e. the list of validation errors. The form component also supports the MVVM pattern and modern accessibility standards.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

DevExtreme Form Layout

DevExtreme Form is a JavaScript UI widget designed by DevExpress as a jQuery plugin. The form’s UI is represented as a range of label-editor combinations that correspond to data fields. All form elements can be arranged in three different ways: columns, groups, and tabs. There is also an empty item utilized for adding space between form items. This widget is optimized for displaying on desktops and mobile devices and allows you to predefine the number of form columns displayed on the screen depending on its size. 

Values entered in the form fields are checked before saving thanks to a validation engine. Using this engine, you can set various validation rule types, including custom and server-side validations that can be disabled dynamically. Moreover, it is possible to modify form items and define their visibility status at runtime. It should be noted that such changes cause updates of just altered items without re-rendering of the whole form.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

What is GEEK

Buddha Community

Overview of JavaScript Form Widgets - DZone Web Dev
Ivan Petrenko

Ivan Petrenko

1651655242

Overview of JavaScript Form Widgets - DZone Web Dev

Overview of JavaScript Form Widgets

A web form is probably the main communication channel between a user and a web application. It commonly serves for gathering important information from end-users that can trigger updates on the client-side or be stored in the database on the server-side. Poorly designed or confusing forms can cause a lot of inconvenience to end-users and application owners. Therefore, it is necessary to pay serious attention to the proper implementation of forms and their features such as labels, notifications, validation rules, etc.

The task of integrating forms like any other interface elements into web apps can be significantly simplified by utilizing JavaScript UI libraries. Such tools are very popular among programmers, as they help to accelerate the development process and reduce the number of errors in the codebase.

In this article, we will consider form widgets and form-related controls included in popular UI libraries.

#web-development #JavaScript #webapp  #forms

DHTMLX Form

DHTMLX Suite provides a range of widgets for seamlessly adding feature-packed UI components to any web project. The list of available solutions includes a cross-browser JavaScript/HTML5 Form. It enables you to use 14 various form controls and group them in the desired way for building forms of any complexity. Apart from standard elements (input fields, checkboxes, action buttons, etc.), your form can contain a file uploader, slider, datepicker, and other useful controls from the Suite package. Predefined validation rules and notification messages ensure that users submit only valid data. Notification messages help to avoid any misconceptions during the form completion. If necessary, you can also disable any form options or hide them. 

 

DHTMLX online exam system demo

A rich API of DHTMLX Form allows you to customize forms in accordance with your project requirements. For instance, textual data in form labels can be displayed in various languages to be understood by users from different countries. Any styling adjustments are performed via CSS. The initialization process of this widget takes just a few simple steps.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

Webix Form

Webix delivers a collection of UI widgets for creating various parts of a user interface, including forms. The Form widget helps to obtain any kind of information from users and transfer it for further processing with the help of numerous controls and the validation feature. It is possible to set a common configuration for all form controls. If your form should include a particular number of digits/vowels (credit cards, telephone numbers, etc.), you can specify a pattern for formatting inputted data. It is not a problem to disable form elements or switch to the read-only mode.

The Form widget can be combined with other Webix components for displaying complex forms. You can separate a big form into logical parts and attach to them text labels using Fieldset and Section components. Another option is to divide a form with the help of tabs and segmented buttons, thereby forming a multiview layout. Webix data widgets (e.g. List) employ the Form as editors. Webix also offers the HTMLForm widget that allows you to upgrade simple HTML forms with the Webix Form API and also use it with other Webix widgets. You can also benefit from using a special Webix tool (Form Builder) for generating forms. 

Compatible with: Angular, React, Vue.js, Backbone

Useful resources: documentation, samples

Kendo UI Form

The Form component is a part of the Kendo UI library. It is intended for generating and managing forms in web applications. This UI tool comes with a number of configuration and customization options to facilitate the implementation process.

In addition to the default layout, you can apply the grid layout (up to 12 columns) in your form. This option is supported only in modern browsers. Positioning of form elements in a more intuitive manner is achieved with the grouping function. There are two modes for showing form labels (vertical and horizontal). The Kendo form comes with a customizable built-in validator. This important feature is set in action on the submission and can include the validation summary i.e. the list of validation errors. The form component also supports the MVVM pattern and modern accessibility standards.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

DevExtreme Form Layout

DevExtreme Form is a JavaScript UI widget designed by DevExpress as a jQuery plugin. The form’s UI is represented as a range of label-editor combinations that correspond to data fields. All form elements can be arranged in three different ways: columns, groups, and tabs. There is also an empty item utilized for adding space between form items. This widget is optimized for displaying on desktops and mobile devices and allows you to predefine the number of form columns displayed on the screen depending on its size. 

Values entered in the form fields are checked before saving thanks to a validation engine. Using this engine, you can set various validation rule types, including custom and server-side validations that can be disabled dynamically. Moreover, it is possible to modify form items and define their visibility status at runtime. It should be noted that such changes cause updates of just altered items without re-rendering of the whole form.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

Ajay Kapoor

1626321063

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

Dexter  Goodwin

Dexter Goodwin

1621254840

Overview of JavaScript Form Widgets

In this article, we review UI widgets that help developers to create web forms of any complexity much faster.

A web form is probably the main communication channel between a user and a web application. It commonly serves for gathering important information from end-users that can trigger updates on the client-side or be stored in the database on the server-side. Poorly designed or confusing forms can cause a lot of inconvenience to end-users and application owners. Therefore, it is necessary to pay serious attention to the proper implementation of forms and their features such as labels, notifications, validation rules, etc.

The task of integrating forms like any other interface elements into web apps can be significantly simplified by utilizing JavaScript UI libraries. Such tools are very popular among programmers, as they help to accelerate the development process and reduce the number of errors in the codebase.

In this article, we will consider form widgets and form-related controls included in popular UI libraries.

DHTMLX Form

DHTMLX Suite provides a range of widgets for seamlessly adding feature-packed UI components to any web project. The list of available solutions includes a cross-browser  JavaScript/HTML5 Form. It enables you to use 14 various form controls and group them in the desired way for building forms of any complexity. Apart from standard elements (input fields, checkboxes, action buttons, etc.), your form can contain a file uploader, slider, datepicker, and other useful controls from the Suite package. Predefined validation rules and notification messages ensure that users submit only valid data. Notification messages help to avoid any misconceptions during the form completion. If necessary, you can also disable any form options or hide them.

DHTMLX online exam system demo

A rich API of DHTMLX Form allows you to customize forms in accordance with your project requirements. For instance, textual data in form labels can be displayed in various languages to be understood by users from different countries. Any styling adjustments are performed via CSS. The initialization process of this widget takes just a few simple  steps.

Compatible with:  Angular,  React,  Vue.js

Useful resources:  documentation,  samples

#javascript #web development #javascript libraries #widgets

Jamal  Lemke

Jamal Lemke

1600056000

Blazor for ASP.NET Web Forms Developers PDF

Blazor is a new web framework that changes what is possible when building web apps with .NET. It is also a client-side web UI framework based on C## instead of JavaScript. When paired with .NET running on the server, Blazor enables full-stack web development with .NET.

It also builds on the foundations of .NET Core to provide a modern and high-performance web development experience. Additionally, Blazor is a natural solution for ASP.NET Web Forms developers looking to take advantage of client-side development and the open-source, cross-platform future of .NET.

This e-book pdf covers the following ASP.NET Web Forms features and practices:-

  • Building Blazor apps.
  • How Blazor works.
  • Blazor’s relation to .NET Core.
  • Reasonable strategies for migrating existing ASP.NET Web Forms apps to Blazor where appropriate.
  • A reference sample that demonstrates the migration strategies used.

#articles #asp.net #blazor #blazor for asp.net web forms #blazor for asp.net web forms developers #blazor web forms #convert web forms to blazor

How to Create a Client-Side Form Validation using JavaScript

In this video, we will create a client-side form validation using JavaScript. I'll only use Vanilla JavaScript and no external 3rd party dependencies. The aim is to help beginners to do form validation and understand how the whole process works.

Timestamps:
00:00 Intro
00:26 HTML
03:33 CSS
05:35 Javascript

Source code: https://codepen.io/javascriptacademy-stash/pen/oNeNMNR


 HTML

Let's start with the HTML markup. We'll have a container div, that we'll use to position and style our form. Inside that, not surprisingly, we'll create a form, we also set an id for it, and set the action to / since we don't really want to submit this form.

We'll create four input fields, for the username, email, password, and password confirmation. For styling and control purposes we'll wrap these input tags into divs with the class input control. Each of these input controls will contain a label, an input, and a div with the class error. Every input should have an id and name attribute. The label's should have a matching for property with the corresponding input tag's name attribute. For the input type we will use text for the username and email, and use password for the password and the password confirmation. The div with the error class will hold the error messages for the specific input field. It will be empty for now, we will modify it from javascript.

Lastly, we have to add a button to "submit" our form. In this example we won't really submit the form just simulate it. For the submit button I'll use a button with a type of submit.

<div class="container">
        <form id="form" action="/">
            <h1>Registration</h1>
            <div class="input-control">
                <label for="username">Username</label>
                <input id="username" name="username" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="email">Email</label>
                <input id="email" name="email" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password">Password</label>
                <input id="password"name="password" type="password">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password2">Password again</label>
                <input id="password2"name="password2" type="password">
                <div class="error"></div>
            </div>
            <button type="submit">Sign Up</button>
        </form>
    </div>

That is the HTML markup that we need for our form. Let's style it a bit with CSS.

CSS

We'll give a simple clean spacious design for this tutorial. I'll set a linear gradient as the background and I'll use a custom google font, that you can install from here.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

We'll give a fix width to our form, and center it with margins, also I'll give it a top margin to move it down a bit vertically. To have more space we apply 20px of padding. We'll set a fixed font size, a light background color and also set a border radius to have rounded corners.

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

For the form title, we'll use a dark text color, and center it horizontally using text-align: center. The submit button should stand out so we'll use a blue background color, and white text color. We also remove the browser default borders and give it a little border-radius. We'll give it a little spacing with paddings and margins, and make it full-width by applying 100% width.

#form h1 {
    color: #0f2027;
    text-align: center;
}

#form button {
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: rgb(41, 57, 194);
    border: none;
    border-radius: 4px;
}

To have the inputs stacked below each other we'll use flexbox. To do that we'll set display: flex; and flex-direction: column. For the inputs we'll set a grey border, with a little border-radius. We'll set the display property to block, and make them full-width, by applying width 100%. We'll also set a little padding, so it'll be more spacious. I'll also remove the outline when the input is in focus, by setting outline: 0.

.input-control {
    display: flex;
    flex-direction: column;
}

.input-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    padding: 10px;
    width: 100%;
}

.input-control input:focus {
    outline: 0;
}

We'll use two classes ("success" and "error") to give visual feedback to the user on whether the input's value is valid or not. We'll apply these classes from javascript to the input-control div which contains the specific input field. When the success class is present we will set a green border color, otherwise if error is present we'll use a red border color instead. For the error div we'll use a smaller font-size and a red color to show the error messages.

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}

Let's do the validation in javascript next!

Javascript

The first thing we have to do is to save references for the form, and the input fields. As we gave id for every input and the form we can easily to do by using getElementById.

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

To prevent the form for automatically submit we have to attach and event listener to our form's submit event. In this event handler function we have to call preventDefault() function to prevent the form from submitting automatically. Instead of submitting we'll call the validateInputs function, which will validate the inputs and if we want to we can submit the form in there after every check passes, but we won't do that in this tutorial. We'll create this validateInputs shortly.

form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

We'll also create two helper functions: setErrorsetSuccess. We'll use these helper functions to set the error or success states of the input controls. Let's start with the setError one. It receives two parameters: element, and message. The element will be the input element that is in the specific input-control. So first we have to get the input control parent div. We'll save it into the inputControl variable, and get the input control div by using the parent property of the input element. Next we have to gather the error div, and save it into a variable. We can do that by querying the input control with the error class.
Now we have to set the error div's innerText to be the message that we got in parameters, and remove the success class from the input control (if it exists) and add the error class.

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

The setSuccess method will be really similar. The first difference is that it won't receive a message as a parameter. We have to clear the error display by setting its innerText to an empty string. Lastly we have to reverse the class application. We'll add the success class to the inputControl and remove the error class (if present).

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

We will create one last helper function to validate emails. This is an optional step, if you don't want to use regular expressions, feel free to just set the input type of the email field to email. The isValidEmail function will take a string as a parameter and use this weird looking regular expression to check whether it is a valid email or not. We'll use String.test() function to test the string against the regex. We'll also convert the email to a string and make it lowercase.

const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

Now we should create the validator validateInputs function. First we will get the value of all the input fields. We can do that by getting the value property's value of the input field references. We'll call the String.trim() function to remove the trailing empty spaces (if any) from the start and end of the values.
Then we can start validating inputs. We'll use if, else statements to do the validation. For the username we will check whether if it is empty or not, by comparing the value with an empty string. If it empty, we'll call the setError function and provide the username element to it, with our error message. Otherwise we'll call the setSuccess method with the username element. Now we have to do this for the other input fields, but the approach will be the same.

const validateInputs = () => {
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
        setError(username, 'Username is required');
    } else {
        setSuccess(username);
    }
};

For the email we'll check if it is provided or not, and set an error if it is empty. If it is not empty we'll check whether it is a valid email address, and if not we'll set an error, otherwise we set success for the field.

if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }
}

For the password we'll check whether it is empty or not, and if it is not empty we'll check if it is longer than 7 characters. If not, well set an error, otherwise we'll set it as success.

if(passwordValue === '') {
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8 ) {
        setError(password, 'Password must be at least 8 character.')
    } else {
        setSuccess(password);
    }
}

For the password confirmation we'll check if it is empty, and we should also check if the password confirmation's value is equal to the password's value.

if(password2Value === '') {
        setError(password2, 'Please confirm your password');
    } else if (password2Value !== passwordValue) {
        setError(password2, "Passwords doesn't match");
    } else {
        setSuccess(password2);
    }
}

Now we have every input validated, if we wanted to we could submit our form now to a specific endpoint.

Good job now you have a working form validation Javascript. Please note that you always have to validate the form inputs on the server-side as client-side validation can be easily bypassed. There are way more advanced form validation methods and libraries that we use in modern web development, but this project is a really good way to start and learn the fundamentals.

#javascript