Add validation for fields and controls

You can add validation for web forms to ensure that a user provides necessary and properly formatted information. In this article, we will explore different types of validation available out-of-the-box and with JavaScript.

Require field

Make a field required to ensure that a user provides all the necessary information. Required fields are marked with an asterisk (*). If the required field is left blank, a user will not be able to submit the form and will get the error message:

Required field error

Require field by default

You can make a field required right in the web designer:

Required property

Require field dynamically

Another option is to make the field required dynamically using JavaScript code. For instance, to make a field optional/required based on another field value:

Require field dynamically demo

Update the field names in the code to make the code work on your form:

fd.rendered(function() {
    fd.field('ContactBy').$on('change',function(value){
        //When users select SMS
        if(value == 'SMS') {
            //make Phone field required and
            fd.field('Phone').required = true;
            //Email field is optional
            fd.field('Email').required = false;
        }
        //When users select Email
        if(value == 'Email') {
            //make Phone field optional and
            fd.field('Phone').required = false;
            //Email feild required.
            fd.field('Email').required = true;
        }
    });
});

Validate input

Various types of information, such as email addresses, phone numbers, postal addresses, and others, must be provided in the correct format. There are several ways to validate the field value:

Below we will share which approach is best for a particular situation.

Validate email address

Every email address consists of 3 elements: user name, @ symbol, and domain name. The user name and domain name can be of any length and contain alphabetic and numeric characters. But the email address must always contain the @ symbol and the dot. Checking the input against the RegExp pattern would be the best choice here.

Add the Text field and select the Email as the pattern type. You can also change the error message which is displayed when the input is invalid.

Email pattern set up

Thus, users will get an error message if the email address is in an invalid format:

Email pattern demo

Validate phone number

The format and length of the phone number differ for each region. Depending on your target audience and preferences, you can choose between:

  • using the predefined RegExp pattern for the Phone number:

    Phone pattern predefined

    Validate an 11-digit phone number with a + sign and spaces:

    Phone pattern predefined example

  • creating a custom pattern. For instance, validate a 10-digit phone number with no spaces and special characters:

    Phone pattern predefined

    This is the valid phone number format:

    Phone pattern custom example

  • adding the Masked input field type. Thus users must follow a certain pattern and won’t be able to enter anything that doesn’t match the mask.

    You can create any mask of your choice:

    Phone mask

    This is how the masked input works:

    Phone mask demo

Validate ZIP code

As with a phone number, the ZIP code format differs for each country. Depending on the country, you can configure different RegExp patterns or masks.

Validate the 5-digit ZIP code used in the U.S. using masked input as shown below:

ZIP mask

And this is how the mask works for the United States ZIP code:

ZIP mask demo

Or validate postcode used in the United Kingdom with the custom RegExp pattern:

ZIP pattern

^(GIR|[A-Z]\d[A-Z\d]??|[A-Z]{2}\d[A-Z\d]??)[ ]??(\d[A-Z]{2})$

This is how validation works for the postcodes:

ZIP pattern demo

Validate text length

When collecting reviews, comments, and descriptions from users, you might want to limit the length of the text. That way, you can gather more relevant and higher quality data, and it’s also one way to filter out spammers.

Add a custom validator for the Note field to set a text length limit above 60 characters and below 1000. In the code, you can specify an error message for each condition individually:

fd.rendered(function() {
    fd.field('Note1').addValidator({
        name: 'Text validation',
        error: 'Please enter text',
        validate:function(value){
            if(value.length < 60){
                this.error = 'Text is too short. Please use at least 60 characters.'
                return false;
            }
            if(value.length > 1000){
                this.error = 'Text is too long. Please keep your text under 1000 characters.'
                return false;
            }
            return true;
        }
    });
});

This is how custom validation behaves on a form:

Text limit

Validate date

In some cases, you might want to limit the range of dates that users can select on the calendar. For instance, allow users to select a date in the future within 30 days.

You can disable dates outside the desired range using the code:

fd.rendered(function() {
    var today = new Date();
    //define the date range from today's date
    var minDate = today.setDate(today.getDate()+1);
    var maxDate = today.setDate(today.getDate()+30);

    //set the date range that the calendar can show
    fd.field('CallBackDate').widgetOptions = {
        min: new Date(minDate),
        max: new Date(maxDate)
    }
});

Thereby, users are not able to select or enter a date outside of the date range:

Date demo

Validate attachments

You can configure the verification of files uploaded by users using the Attachments field properties and custom code.

Validate file size

You can define the maximum possible file size in Kb that users can upload in the Max Size property:

File size

If the file size exceeds the allowed value, a user will not be able to upload the file and will get an error message:

File size demo

Validate file type

You can limit the file types that users are permitted to upload. List the allowed file extensions in the Allowed Ext property:

File ext

If the file type does not match any on the list, the user will not be able to upload the file and will get an error message:

File ext demo

Validate count of files

You can also require users to upload a certain number of files. To do this, you need to add a custom validation for the field:

fd.rendered(function () {
    fd.field('Attachments').addValidator({
        name: 'Attachments validator',
        error: 'Do not attach more than 3 files',
        validate:function(value){
            if(value.length > 3){
                return false;
            }
            return true;
        }
    });
});

Validate controls

You can configure validation for controls too. Validate the content of the control, make it mandatory, etc.

Require Ink Sketch control

Add a custom validation for the control to make it required:

fd.rendered(function () {
    fd.control('InkSketch0').addValidator({
        name: 'Ink Sketch validator',
        error: 'Please sign the form',
        validate:function(value){
            if(!value){
                return false;
            }
            return true;
        }
    });
});

Require DataTable control

Add a custom validation for the control to make it required:

//make at least one record required
fd.rendered(function(){
    fd.control('Control0').addValidator({
        name: 'Control1 validator',
        error: 'Enter at least one record into the table',
        validate: function(value) {
            //change this number to make more records required
            if (value.length < 1) {
                return false;
            }

            return true;
        }
    });
});

Require DataTable column

You can make the DataTable column mandatory directly in the designer. Select the column and set the Required property to true:

Require column

Thus, if the column is left blank, the user will get an error and will not be able to submit the form:

Require column error