Setting dynamic regular expression

As you know, we can use the regexp validator to check if the value matches a given JavaScript regular expression. The regular expression must be a string or an instance of RegExp. To make it simple, let's assume that the form asks user to provide a valid ISBN which can be a ISBN 10 or ISBN 13 format.

Here is the form markup:

<form id="demoForm" method="post">
    <div class="cf mb2">
        <div class="fl w-100">
            <div class="fl w-25 pa2">ISBN type</div>
            <div class="fl w-50">
                <select name="isbnType" class="input-reset">
                    <option value="isbn10">ISBN 10</option>
                    <option value="isbn13">ISBN 13</option>
                </select>
            </div>
        </div>
    </div>

    <div class="cf mb2">
        <div class="fl w-100">
            <div class="fl w-25 pa2">ISBN</div>
            <div class="fl w-50">
                <input type="text" name="isbn" class="input-reset ba b--black-20 pa2 mb2 db w-100" />
            </div>
        </div>
    </div>
</form>

The first two radios asks user to choose the type of ISBN. The next text field requires a valid ISBN based on the selected ISBN type.

document.addEventListener('DOMContentLoaded', function(e) {
    const ISBN10_REGEXP = "^[0-9]{9}[0-9X]$";
    const ISBN13_REGEXP = "^(978|979)[0-9]{9}[0-9X]$";

    const demoForm = document.getElementById('demoForm');

    // Create a FormValidation instance which will be used later
    const fv = FormValidation.formValidation(demoForm, {
        fields: {
            isbnType: {
                validators: {
                    notEmpty: {
                        message: 'The ISBN type is required'
                    }
                }
            },
            isbn: {
                validators: {
                    notEmpty: {
                        message: 'The ISBN is required'
                    },
                    regexp: {
                        regexp: ISBN10_REGEXP,
                        message: 'The input is not a valid ISBN',
                    }
                },
            },
        },
        plugins: {
            ...
        },
    });
});

By default, the isbn field uses the ISBN10_REGEXP for the regexp validator. How can we turn it to ISBN13_REGEXP when user picks up the ISBN 13 format? This guide demonstrates a few ways of supporting dynamic regular expression.

This guide uses simple patterns to validate an ISBN. You can use the isbn validator which covers more patterns and also verifies the check digit as well.

Testing numbers

You can use the following sample numbers to test with examples in the next sections.

Sample	Description
9971502100	A valid ISBN 10
99921-58-10-6	An invalid ISBN 10
9780306406157	A valid ISBN 13
978-0-306-40615-6	An invalid ISBN 13

Updating validator options

When user changes the ISBN type, we can use the updateValidatorOption() method to update the validator's option. Then the ISBN field need to be revalidated via the revalidateField() method:

demoForm.querySelector('[name="isbnType"]').addEventListener('change', function (e) {
    const isbnType = e.target.value;
    if (isbnType === '') {
        return;
    }

    let regexp, message;
    switch (isbnType) {
        case 'isbn13':
            regexp = ISBN13_REGEXP;
            message = 'The input is not a valid ISBN 13';
            break;

        case 'isbn10':
        default:
            regexp = ISBN10_REGEXP;
            message = 'The input is not a valid ISBN 10';
            break;
    }

    // fv is the FormValidation instance created above
    fv
        // Update options
        .updateValidatorOption('isbn', 'regexp', 'regexp', regexp)
        // Update message
        .updateValidatorOption('isbn', 'regexp', 'message', message)
        // You might need to revalidate field
        .revalidateField('isbn');
});

Updating validator options

Using the callback validator

We can use both the callback and regexp validators:

callback: function(input) {
    // Get the input value
    const value = input.value;

    // Ignore if the input is empty
    if (value === '') {
        return {
            valid: true,
        };
    }

    // Get the selected ISBN type
    const isbnType = demoForm.querySelector('[name="isbnType"]').value;
    const pattern = isbnType === 'isbn10' ? ISBN10_REGEXP : ISBN13_REGEXP;
    const mesage = isbnType === 'isbn10'
                ? 'The input is not a valid ISBN 10'
                : 'The input is not a valid ISBN 13';

    // Use the regexp validator
    const result = FormValidation.validators.regexp().validate({
        value: value,
        options: {
            regexp: pattern,
            message: message,
        },
    });
    return {
        valid: result.valid,
        message: message,
    };
}

Since the ISBN field depends on the ISBN type, we still need to revalidate it when the type is changed:

demoForm.querySelector('[name="isbnType"]').addEventListener('change', function (e) {
    fv.revalidateField('isbn');
});

Using the callback validator

Setting dynamic regular expression

Testing numbers

Updating validator options

Using the callback validator

See also