{"id":12288,"date":"2024-04-30T18:44:43","date_gmt":"2024-04-30T15:44:43","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12288"},"modified":"2024-05-02T15:33:20","modified_gmt":"2024-05-02T12:33:20","slug":"registration-form-with-validation-javascript-form-widget","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/registration-form-with-validation-javascript-form-widget\/","title":{"rendered":"Building a Registration Form with Validation Using the DHTMLX JavaScript Form Widget"},"content":{"rendered":"

As promised, we come back with a new tutorial that will help us further unleash the customization potential of the DHTMLX Form. Last time, you learned how to build a basic login form<\/a> using this JavaScript widget from our Suite library. Now it is time to take a step forward and show you how to enrich the existing form with a registration option. <\/p>\n

Step 1: Adding a New Tab to the Tabbar in the Form<\/h5>\n

If you need to be reminded how to initialize the Form widget, take a look at the previous tutorial. Now we’ll continue from the point we stopped last time.<\/p>\n

We start by adding a new tab to the tabbar:<\/p>\n

const loginTabbar = new dhx.Tabbar(null, {
\n    mode: "top",
\n    tabAlign: "middle",
\n    css: "dhx_widget--bordered",
\n    views: [
\n        { tab: "login", id: "login" },
\n        { tab: "signup", id: "signup" }
\n    ]
\n})<\/div><\/div>\n

After that, you need to create a new form object that will be used for registration:<\/p>\n

const signUpForm = new dhx.Form(null, {
\n    rows: []
\n})<\/div><\/div>\n

Next, you attach the object to the created tab:<\/p>\n

loginTabbar.cell("signup").attach(signUpForm)<\/div><\/div>\n

Here is what the result should look like:
\n\"registrationCheck the sample ><\/a><\/p>\n

Step 2: Populating the Form<\/h5>\n

Now, we can proceed to the most time-consuming stage of the tutorial, namely, populating a blank “SINGUP” tab with necessary controls.<\/p>\n

First, add the fieldset<\/a> control to the form. This control serves for organizing form elements into groups.<\/p>\n

const signUpForm = new dhx.Form(null, {
\n    rows: [
\n        {
\n            type: "fieldset",
\n            label: "Account",
\n            rows: []
\n        },
\n        {
\n            type: "fieldset",
\n            label: "Personal information",
\n            rows: []
\n        }
\n    ]
\n})<\/div><\/div>\n

\"registrationCheck the sample ><\/a><\/p>\n

As a result, the registration form now includes two fieldset sections – “Account” and “Personal information”.<\/p>\n

Next, you add the input field for the “Username” to the “Account” section:<\/p>\n

        {
\n            type: "fieldset",
\n            label: "Account",
\n            rows: [
\n                {
\n                    label: "Username",
\n                    type: "input",
\n                    name: "user",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                    required: true,
\n                },
\n            ]
\n        },<\/div><\/div>\n

It is required to add some validation for this field to ensure data integrity in the form. It will be allowed to enter only A-Z, a-z, and “-” characters in this field:<\/p>\n

          {
\n              label: "Username",
\n              type: "input",
\n              name: "user",
\n              labelPosition: "left",
\n              labelWidth: 120,
\n              required: true,
\n              validation: function (value) {
\n                  const regexp = \/^[a-zA-Z\\-]+$\/;
\n                  return regexp.test(value)
\n              },
\n          },<\/div><\/div>\n

Also, specify an error message that will be displayed in case end-users enter some other symbols:<\/p>\n

          {
\n              label: "Username",
\n              type: "input",
\n              name: "user",
\n              labelPosition: "left",
\n              labelWidth: 120,
\n              required: true,
\n              validation: function (value) {
\n                  const regexp = \/^[a-zA-Z\\-]+$\/;
\n                  return regexp.test(value)
\n              },
\n              errorMessage: "Must contain only characters A-Z, a-z, and -"
\n          },<\/div><\/div>\n

That’s how it should work:
\n\"registrationCheck the sample ><\/a><\/p>\n

Now you need to add the input field for email.<\/p>\n

                {
\n                    label: "Email",
\n                    type: "input",
\n                    name: "email",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                    required: true,
\n                    validation: "email",
\n                    errorMessage: "Please, enter a valid email"
\n                },<\/div><\/div>\n

Just like with “Username”, this field should also follow certain validation rules.
\n\"registrationCheck the sample ><\/a><\/p>\n

When using our Form widget, you don’t need to worry about setting your own validation rules, as our widget suggests a suitable solution by default. The list of all available predefined validation rules can be found on this documentation page<\/a>.<\/p>\n

It is hard to imagine a registration form without fields for the password and its confirmation. The configuration of these fields must also include validation and error messages.<\/p>\n

               {
\n                    label: "Password",
\n                    type: "input",
\n                    name: "pass",
\n                    inputType: "password",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                    required: true,
\n                    validation: function (value) {
\n                        const regexp = \/(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}\/;
\n                        return regexp.test(value)
\n                    },
\n                    errorMessage: "Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
\n
\n                },
\n                {
\n                    label: "Confirm password",
\n                    type: "input",
\n                    name: "pass_conf",
\n                    inputType: "password",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                    required: true,
\n                    validation: function (val) {
\n                        return val && signUpForm.getItem("pass").getValue() == val
\n                    },
\n                    errorMessage: "Please, verify your entered password"
\n                },<\/div><\/div>\n

After adding these fields, your form should look as follows:
\n\"registrationCheck the sample ><\/a><\/p>\n

At this stage, you get a basic registration form with all the necessary fields, but you can extend it with some additional controls.<\/p>\n

You can add the possibility of choosing the type of account: personal or business. You can do it using the radio group control<\/a> of DHTMLX Form:<\/p>\n

           {
\n               type: "radiogroup",
\n               label: "Account type",
\n               labelPosition: "left",
\n               labelWidth: 120,
\n               required: true,
\n               name: "acc_type",
\n               options: { \/\/list of the radioboxes used in the group
\n                   cols: [ \/\/ direction of the radioboxes
\n                       {
\n                           type: "radioButton",
\n                           text: "Personal",
\n                           name: "person"
\n                       },
\n                       {
\n                           type: "radioButton",
\n                           text: "Business",
\n                           name: "business"
\n                       }
\n                   ]
\n               }
\n           },<\/div><\/div>\n

\"registrationCheck the sample ><\/a><\/p>\n

Now we come to the “Personal information” fieldset. Here you can also add several basic controls. For instance, you can add inputs for “First name” and “Last name”:<\/p>\n

        {
\n            type: "fieldset",
\n            label: "Personal information",
\n            rows: [
\n                {
\n                    label: "First name",
\n                    type: "input",
\n                    name: "name",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                },
\n                {
\n                    label: "Last name",
\n                    type: "input",
\n                    name: "surname",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                },
\n            ]
\n        }<\/div><\/div>\n

\"registrationCheck the sample ><\/a><\/p>\n

One more useful option that can be added to this section of your form is the date of birth. You can specify this parameter with the datePicker<\/a> control:<\/p>\n

                {
\n                    label: "Date of birth",
\n                    type: "datePicker",
\n                    name: "birth",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                    dateFormat: "%d\/%m\/%Y"
\n                },<\/div><\/div>\n

You also can define the preferred date format with the dateFormat<\/strong> property. The value of this property includes a mask of the date according to the template. The details can be found on this page<\/a>.<\/p>\n

\"registrationCheck the sample ><\/a><\/p>\n

One more possible option is specifying the user’s gender. To add this to your form, you’ll need the Select<\/a> control that provides a set of options to choose from.<\/p>\n

                {
\n                    type: "select",
\n                    label: "Gender",
\n                    name: "gender",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                    options: [ \/\/list of the select options
\n                        { content: "", value: "" },
\n                        { content: "Man", value: "man" },
\n                        { content: "Woman", value: "woman" },
\n                        { content: "Another gender identity", value: "other" }
\n                    ]
\n                },<\/div><\/div>\n

It is also common to enable end-users to enter multi-line text in the form. In our case, it is the “About me” section implemented with the textarea<\/a> control.<\/p>\n

                {
\n                    type: "textarea",
\n                    label: "About me",
\n                    labelPosition: "left",
\n                    labelWidth: 120,
\n                }<\/div><\/div>\n

\"registrationCheck the sample ><\/a><\/p>\n

It is also useful to establish a legal agreement with end-users related to the use of their personal information by adding a corresponding checkbox. This control<\/a> is also available in our Form widget.<\/p>\n

The config may look like this:<\/p>\n

        {
\n            type: "checkbox",
\n            labelPosition: "left",
\n            text: "I agree to the Terms and Conditions.",
\n            required: true
\n        },<\/div><\/div>\n

\"registrationCheck the sample ><\/a><\/p>\n

As the final touch, you need to add the “Signup” button with the corresponding Form control<\/a>:<\/p>\n

        {
\n            type: "button",
\n            name: "register",
\n            submit: true,
\n            value: "Submit"
\n        }<\/div><\/div>\n

In terms of the form appearance, the final version should be similar to this sample<\/a>. But we also want to show you how to add the submit action logic to your form. <\/p>\n

Step 3: Adding Actions to the Form<\/h5>\n

In this tutorial, we do not use any real backend, so we just want to show you how to implement the mechanism that detects when an end-user presses the Submit button. You need to add the click<\/strong> event to the form configuration. This event fires after a click on the Button control.<\/p>\n

signUpForm.getItem("register").events.on("click", function (events) {
\n})<\/div><\/div>\n

It will trigger the validation of your form. As a result, an end-user will be informed that the form is filled out correctly:<\/p>\n

signUpForm.getItem("register").events.on("click", function (events) {
\n  if (signUpForm.validate()){
\n    dhx.alert({
\n        text: "Thank you for signing up",
\n        buttonsAlignment: "center"
\n    });
\n    signUpForm.clear();
\n  }
\n})<\/div><\/div>\n

Otherwise, the form will show an error message:<\/p>\n

signUpForm.getItem("register").events.on("click", function (events) {
\n  if (signUpForm.validate()){
\n    dhx.alert({
\n        text: "Thank you for signing up",
\n        buttonsAlignment: "center"
\n    });
\n    signUpForm.clear();
\n  } else {
\n        dhx.message({
\n            text: "Please, fill in all the required fields",
\n            css: "error"
\n        });
\n  }
\n})<\/div><\/div>\n

That’s it. You can test the core functionality of the form using this sample<\/a>.<\/p>\n

Wrapping Up<\/h5>\n

According to Capterra<\/a>, 86% of event management software reviewers identify registration management as a highly important feature. Therefore, it can be a tricky and time-consuming task to implement a registration form from scratch. This tutorial gives you a complete understanding of how to do it much faster using DHTMLX Form. You can test this and other UI widgets from DHTMLX Suite for free in your web project by downloading a 30-day trial version<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

As promised, we come back with a new tutorial that will help us further unleash the customization potential of the DHTMLX Form. Last time, you learned how to build …<\/p>\n","protected":false},"author":101014,"featured_media":12307,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,10],"class_list":["post-12288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=12288"}],"version-history":[{"count":9,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12288\/revisions"}],"predecessor-version":[{"id":12309,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12288\/revisions\/12309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/12307"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=12288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=12288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=12288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}