question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Question]: Is there a way to add validation messages with custom validators?

See original GitHub issue

Adding I18n messages with existing validators is possible but can it be done with a custom validator?

const sizeValidator = (size: number = 15) => (value: string) => {
	return !helpers.req(value) || value.length === size
}
export const size = withI18nMessage(sizeValidator)

Something like the above.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
crotanitecommented, Oct 21, 2021

It did not, I did manage to get it working with something like the below though. (for future reference for anyone)

// size.ts
import { helpers } from '@vuelidate/validators'

export default function(amount: number) {
	return {
		$validator: function(value: string) {
			return !helpers.req(value) || value.length === amount
		},
		$message: ({ $params }) => `This field should be exactly ${$params.amount} long.`,
		$params: { amount, type: 'size' }
	}
}
// validators.ts
import { createI18nMessage } from '@vuelidate/validators'
import { createI18n } from 'vue-i18n'
import sizeValidator from './size'

const i18n = createI18n({
	locale: 'en',
	messages: {
		en: {
			validations: {
				size: 'The {property} field must be {amount} characters long.'
			}
		}
	}
})
const t = i18n.global.t
const withI18nMessage = createI18nMessage({ t })

export const size = withI18nMessage(sizeValidator, { withArguments: true })
1reaction
dobromir-hristovcommented, Oct 21, 2021

You probably dont need to specify $message if you are applying i18n messages. But yeah, glad you sorted it out. Docs could deff be improved in this regard.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Add Custom Validation Error Message for ...
I'm using reactive angular forms and created new custom form validator but its not showing custom messages I wanted to add custom message...
Read more >
Custom Validators
You can easily write custom validators and combine them with builtin ones, as those are just a simple predicate functions.
Read more >
How To Use Custom Form Validation in Angular
Learn how to create a custom validator in Angular for both template-driven and reactive forms.
Read more >
Angular Custom Form Validators: Complete Guide
A validator can be plugged in directly into a reactive form simply by adding it to the validators list. Each form field has...
Read more >
Response Requirements & Validation
There are two types of custom validation messages you can create: modified Qualtrics error messages, where you take a system default message and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found