Versions:
VueJs: 2.2.6
Vee-Validate: ^2.0.0-beta.25
Description:
I am working on a project, where I use laravel-vue-starter
as a base template.
I wants to use a custom validation for password. So I created a resources\assets\js\validators\passwordValidators.js file with code:
import { Validator } from 'vee-validate';
Validator.extend('password', {
getMessage: field => 'Insert a strong password, it should contain Uppercase letter, lowercase letter, number and special character',
validate: value => /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.[\W]).{8,}$/.test(value)
});
But when I am addingv-validate="'password'"
It produce an error[vee-validate] No such validator 'password' exists
Any help will be appreciated.
I think the answer is simple, you are now using a rule name 'password' , but your rule is password.
So try this in your markup (string notation), remove the single quotes.
v-validate = "password"
Or you can also use the object notation when you have more then 1 and complex rules.
v-validate = "{password: true}"
Regards Ben
Related
I am using express-validator and I have chained some validations to link parameter like this:
route.post('/landing-pages/:link/blocks',
[
param('link').trim().escape().isString()
],
controller.addBlocks);
I need to add some chained functions like trim and escape to be able to modify the value.
I can use custom method like the following to add new validation:
route.post('/landing-pages/:link/blocks',
[
param('link').trim().escape().isString().custom((value, { req, location, path }) =>
{
//return true/false based on custom validation.
}
],
controller.addBlocks);
But instead of validating and returning true/false, I want to modify value and change it's original source exactly the way that trim or escape is doing it. for example, I want to replace some characters or I want to remove some words, etc.
Is there anyway to do it with express-validator?
you can chain customSanitizer function for that purpose
param('link').trim().escape().isString().customSanitizer(value => {
// imagine we have a sanitizer function
const sanitizedLink = linkSanitizer(value)
return sanitizedLink;
})
We're already using Vuelidate - a Vue.js model validation library to validate "configuration" for a "widget" in an "Edit Widget Configuration" form.
Now we also need to determine whether a "configuration" object (e.g. from JSON) it is valid, without the "configuration" object being inside a Vue object like a form, and would like to re-use the validation logic we've already written for the form.
Can I use vuelidate to validate such a non-vue "configuration" Javascript object? If so, how?
The question stems from a forum.vuejs.org post, where "wube" says:
I think you missed the purpose of Vuelidate. This is just a model-based validation library. Its goal is to give you an information whether the data is valid or not. I think that you probably got confused because all the examples in their docs are based on forms, but Vualidate can be used to validate any kind of data, not only forms data (in opposite to libraries like Parsley 43 that are designed for forms validation).
Exaclty. I'm trying to validate "any kind of data". How can I do that?
So how do I create the $v from:
let configuration = {
name: '',
age: 0
};
let validations = {
name: {
required,
minLength: minLength(4)
},
age: {
between: between(20, 30)
}
};
let $v = ???
I'm using vuetify validation, and i have three date fields: Month, From, To. I need to add required rule according to the following:
If Month selected - From and To not required.
If any of From or To selected - Month not required.
I tried computed() method, to check if From or To are null, but it seems like :rules set once, and then not change.
computed: {
monthRules() {
return this.searchForm.from ? [] : [factory.required()];
},
Here's some code
<date-field
ref="month"
v-model="searchForm.month"
:rules="monthRules"
>
</date-field>
<date-field
ref="from"
v-model="searchForm.from"
#input="validateTo"
:rules="fromRules"
>
</date-field>
<date-field
ref="to"
v-model="searchForm.to"
:rules="toRules"
>
</date-field>
monthRules: [factory.required()],
fromRules: [],
toRules: [
*some rules from factory here*
],
factory
required() {
return v => !!v || 'Field is required';
},
Is it possible to dynamically build an array of rules? Or is there a better way
I am not very clear on Vuetify rules as I think it's better to use a specialized library like vee-validate which already has a ton of pre-defined rules, for something like this. As for the dynamic rules, the best way to go about would be to use an object binding like so:
:rules="{
required: requiredBool
}"
Where requireBool is your computed property. Again, as I said, I am not very familiar with Vuetify rules, but this works like a charm with Vee-Validate.
My customer connexion form has a password field which contains pattern=".{5,}". Since it's not a registration form, I would want to remove this HTML attribute.
Thus, I opened classes/form/CustomerLoginForm.php and I saw a FormFormatterInterface was used here: classes/form/CustomerLoginFormatter.php.
The latter contains:
public function getFormat()
{
return [
[...],
'password' => (new FormField)
->setName('password')
->setType('password')
->setRequired(true)
->setLabel($this->translator->trans(
'Password', [], 'Shop.Forms.Labels'
))
->addConstraint('isPasswd'),
];
}
No line specify this HTML pattern attribute.
Where could I remove it? Should I write some setter or add some constraint in the above code? (in an override of course)
You can remove that pattern from the file: /themes/classic/templates/_partials/form-fields.tpl
Search for this line and remove or change as your needs: pattern=".{literal}{{/literal}5,{literal}}{/literal}"
I have an input field for a value that should have exactly 5 digits. I would like to show errors when typing characters other than digits immediatly (onChange) but showing the error for unsufficient string length only on blur.
My rule looks like so at the moment:
ValidationRules
.ensure("myInput")
.matches(new RegExp(/[0-9]/))
.minLength(5)
.on(this);
MaxLength is restricted by setting maxlength in html.
If I set the validation trigger to "onChange" to get an immediate response to wrong characters I also get an error shown for not satisfying the minLength rule while typing correct digits until having typed 5 of them.
The behavior I would like to have is to apply the matches-rule onChange and the minLength-rule onBlur.
Is there any possibility to apply two rules on the same property on different events? I know how to validate manually but I don't know how to differenciate between rules.
You can use the when fluent API to satisfy your needs. Something like this -
ValidationRules
.ensure('email')
.email()
.required()
.when((order) => {
if (order.length > 4) {
order._ruleHasBeenMet = true;
}
return order.length > 4 && order._ruleHasBeenMet;
}
.withMessage('Email is required when shipment notifications have been requested.');
Encouraged by #PWKad's answer I played a little with .when() and came up with this:
I changed the validate trigger to "validateOnChangeAndBlur" and added a reference to my field:
<input type="text" value.bind="myInput & validateOnChangeAndBlur" maxlength="5" ref="myInputRef">
I extended the validation rule with a conditional validation checking if my input has focus as I only want to validate length when the input loses focus:
ValidationRules
.ensure("myInput")
.matches(new RegExp(/[0-9]/))
.minLength(5)
.when(() => this.dwKapitel !== document.activeElement)
.on(this);
This works like I expect it to work.