Preventing user to have same value as the placeholder

For instance, we could show an error message when someone enters First name or Last name for the text fields named firstName and lastName, respectively. To do that, we create a custom validator following the signature as below:

const checkPlaceholder = function () {
    return {
        validate: function (input) {
            // input.element presents the field element
            // input.elements presents all field elements
            // input.field is the field name
            // input.value is the field value

            // Has to return an object containing valid key
            return {
                valid: input.value != input.element.getAttribute('placeholder'),
            };
        },
    };
};

Now, you can apply the created validator with multiple fields:

FormValidation
    .formValidation(
        document.getElementById('demoForm'),
        {
            fields: {
                firstName: {
                    validators: {
                        ...
                        placeholder: {
                            message: 'The value cannot be the same as placeholder'
                        },
                    }
                },
                lastName: {
                    validators: {
                        ...
                        placeholder: {
                            message: 'The value cannot be the same as placeholder'
                        },
                    }
                },
            },
            plugins: {
                ...
            },
        }
    )
    .registerValidator('placeholder', checkPlaceholder);

For this specific requirement, we also can use the callback validator validator:

callback: {
    message: 'The value cannot be the same as placeholder',
    callback: function(input) {
        return {
            valid: input.value != input.element.getAttribute('placeholder'),
        };
    },
}

Preventing user to have same value as the placeholder

Preventing user to have same value as the placeholder

See also