This is a rather large release for this package, First off, thanks to some amazing people we got many new locales for messages, checkout the dist directory for all available locales.
Flags (New):
Added field flags, which should help you implement a better experience for your users, the available flags are:
- dirty.
- valid.
- clean (is not dirty).
- passed (is dirty and valid).
- failed (is dirty and not valid).
Pretty much like errors, the fields are being stored in a custom FieldBag object, which is transparent to you. you only have to deal with a normal object. you will notice that the fields object is computed in v 2.x while in v 1.x it is a data object, that's because I faced some issues while implementing the v 1.x version due to my own lack of knowledge about the reactivity in Vue. help is appreciated.
You can access the flags like this:
this.fields.{fieldName}.{flag}
or you can check a working example here.
Checkboxes and Radio Buttons Support
Support was added for the check boxes and the radio buttons inputs, if you have a group of inputs you only have to apply the directive on one of them, like this:
<div class="radio buttons">
<input v-validate data-rules="required|in:1,2" type="radio" name="somevalue" value="1">Radio 1
<input type="radio" name="somevalue" value="2">Radio 2
<input type="radio" name="somevalue" value="3">Radio 3
<span class="error" v-show="fields.somevalue.failed">{{ errors.first('somevalue') }}</span>
</div>Regex rule
Regex rule had an issue where you can't use pipes within your regular expressions, while it is still the same when specifying the rule in the HTML, but now you can pass objects instead of strings as a validation expression like this:
const v = new Validator();
v.attach('field', [
{ name: 'required' },
{ name: 'regex', params: [/.(js|ts)$/] }
]); // this object form is actually how the validator stores the validations for each field.Docs update
The documentation is going through a lot of changes, I changed the CSS framework to bulma as well as trying to have a better navigation experience, new examples should be up us well when the documentation site is updated, should take few days.
Issues fixed:
Known Issues:
- Flags do not play well with scopes, fields with the same name within the same Vue instance will conflict with each other.