updateFieldStatus()

Update the field status

updateFieldStatus(field: String, status: String, validator: String): Core

* presents a required parameter

  • field * — The field name
  • status * — The new status. It can be one of the following value
    • 'NotValidated' or FormValidation.Status.NotValidated: The field is not yet validated
    • 'Valid' or FormValidation.Status.Valid: The field is valid
    • 'Invalid' or FormValidation.Status.Invalid: The field is invalid
  • validator — The validator name. If it isn't specified, all validators will be updated

Example: Validating credit card expiration date

The following form requires to provide a valid expiration month and year of credit card. Because the date validator asks for all the year, month and day, it isn't helpful in that case.

Instead, we will use the callback validator to check the validity of month and year fields. Because these fields depend on each other, the updateFieldStatus() method is used to set month/year field as valid one.

Note

For demonstrating purpose, the expiration date is treated as valid if it is in the range of current month and next 10 year

Example: Asking fields to be unique

Sometime the user need to fill multiple fields in form, also each of them must be unique. Any of them has to be different to the remaining. You might think of using the different validator which requires two fields to be different to each other, such as an username and password shouldn't be the same. In our case, the different validator isn't useful because the number of fields for doing comparison are unknown.

The form in this example asks user to provide some email addresses. User is also required to fill at least one email address. Each of them, if present, must be unique. This kind of form can be seen in a lot of forms nowadays.

The approach illustrated in this example is that:

  • Use the emailAddress validator to ensure each field need to be a valid email address
  • Use the callback validator to check if the list of email addresses consist duplicated item
  • If all fields pass these validators, we then use the updateFieldStatus() method to set them as valid fields

That are straight forward steps. The next sections show the implementation in details.

Checking duplicate items in array

In order to check whether an array contains duplicated items or not, we can use a simple implementation:


const hasDuplicatedItems = function(inputArray) {
    const obj = {};
    const numItems = inputArray.length;
    const duplicateRemoved = [];

    for (const i in inputArray) {
        obj[inputArray[i]] = 0;
    }

    for (const i in obj) {
        duplicateRemoved.push(obj[i]);
    }

    return duplicateRemoved.length === numItems;
}

Since the array of email addresses might consist of empty item, we need to adjust the code above a little bit to ensure that the array has at least one not-empty item and doesn't contain any duplicated items:


// Assume that emailElements is the list of email elements
let notEmptyCount      = 0;
const obj              = {};
const duplicateRemoved = [];

for (const i in emailElements) {
    const v = emailElements[i].value;
    if (v !== '') {
        obj[v] = 0;
        notEmptyCount++;
    }
}

for (const i in obj) {
    duplicateRemoved.push(obj[i]);
}

if (duplicateRemoved.length === 0) {
    // All the items are empty
} else if (duplicateRemoved.length !== notEmptyCount) {
    // The list of emails have duplicated items
}

Using the same names

The example code below demonstrates the implementation when all email fields use the same names, email[], for example.


const form = document.getElementById('demoForm');
const fv = FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            'email[]': {
                validators: {
                    emailAddress: {
                        message: 'The value is not a valid email address'
                    },
                    callback: {
                        callback: function(input) {
                            ...

                            if (duplicateRemoved.length === 0) {
                                return {
                                    valid: false,
                                    message: 'You must fill at least one email address',
                                };
                            } else if (duplicateRemoved.length !== notEmptyCount) {
                                return {
                                    valid: false,
                                    message: 'The email address must be unique',
                                };
                            }

                            // Set all fields as valid
                            fv.updateFieldStatus('email[]', 'Valid', 'callback');
                            return {
                                valid: true,
                            };
                        }
                    },
                }
            }
        },
        plugins: {
            ...
        },
    }
);

Using different names

What if the email fields have different names? How we can set the validator rules for them?

In this case, we can use a same CSS class for all email fields:






and then use the selector option to apply the same set of validation rules for them:


const form = document.getElementById('demoForm');
const fv = FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            'email[]': {
                // All email fields have .js-user-email class
                selector: '.js-user-email',
                validators: {
                    ...
                }
            }
        },
        plugins: {
            ...
        },
    }
);