yii2 Error of dynamic client validation URL - Cannot read property 'test' of undefined

Question

I add a field dynamically using jquery and then dynamically add the field to the validation list as shown in the link (Adding and removing fields dynamically). In my code, I add url validation.

function validateDynamicField() {
    $('#serial-form').yiiActiveForm('add', {
        id: 'link-1-link',
        name: 'link-1-link',
        container: '.field-link-1-link',
        input: '#link-1-link',
        error: '.help-block',
        enableAjaxValidation: true,
        validate:  function (attribute, value, messages, deferred, $form) {
            yii.validation.required(value, messages, {
                "message": "Name be blank bug."
            });
            yii.validation.url(value, messages, {
                "message": "Name must be a url."
            });
        }
    });
}

At client url validation of a field appearing errors:

Uncaught TypeError: Cannot read property 'test' of undefined in yii.validation.js.

This error appears on line 244:

if (!valid || !options.pattern.test(value)) {

Answer 1

That is because you need to provide the pattern against which it would validate the URL, as you are calling the validation.url the complete options that you should pass

{
    "pattern": /^(http|https):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(?::\d{1,5})?(?:$|[?\/#])/i,
    "message": "Name must be a url.",
    "enableIDN": false,
    "skipOnEmpty": 1
}

enableIDN: Whether the validation process should take into account IDN (internationalized domain names).

if you add a console.log(options); in the start of the function url in the file yii.validation.js and then go inside any form where you have a URL field added normally with a rule inside the model as url, for instance, if you have a website field in the model the rule should look like [['website'],'url'] then pressing the submit button with empty inputs you will see console.log(options) output as the same as above which are adapted via core validator-rules.

So change your code to

function validateDynamicField() {
    $('#my-form').yiiActiveForm('add', {
        id: 'link',
        name: 'link',
        container: '.field-link',
        input: '#link',
        error: '.help-block',
        enableAjaxValidation: true,
        validate:  function (attribute, value, messages, deferred, $form) {
            yii.validation.required(value, messages, {
                "message": "Name be blank bug."
            });
            yii.validation.url(value, messages, {
                "pattern": /^(http|https):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(?::\d{1,5})?(?:$|[?\/#])/i,
                "message": "Name must be a url.",
                "enableIDN": false,
                "skipOnEmpty": 1
            });
        }
    });
}