npm vee-validate 2.0.0-rc.1

latest releases: 4.12.6, 4.12.5, 4.12.4...
6 years ago

After a long time since the last release, a lot of issues has been addressed and much more needed improvements are added, also I'm happy to say the first release candidate as I'm confident with the current API and would like to continue along with it.

Breaking Changes 🔥

  • .initial modifier now forces validation on the initial value instead of ignoring it, by default initial values will be ignored. previously it was supposed to ignore the initial value but the modifier had not effect.

  • Custom components validation, you now won't need to provide a data-vv-value-path attribute, instead the validator will expect a value property on the component that is watchable via the $watch API.

  • validator.getLocale() is deprecated in favor of locale getter.

  • The flags API has deprecated, this change is needed because the previous API was fragile and hard to extend without changing a lot, however the flags are now accessed like regular objects, and they are now reactive, meaning you can use them in your computed properties.

Here is an example of how you would use the new flags API:

    <div class="form-input">
      <input type="text" name="field" v-validate="'required|email'" placeholder="Field">
      <span v-show="errors.has('field')">{{ errors.first('field') }}</span>
      <span v-show="fields.field && fields.field.dirty">I'm Dirty</span>
      <span v-show="fields.field && fields.field.touched">I'm touched</span>
      <span v-show="fields.field && fields.field.valid">I'm valid</span>
    </div>

Notice that you need to check for the field existence before attempting to access the flags, that is to avoid component rendering errors since the flags objects are only available after the mounted() cycle.

Also flags now support scopes, for global level fields' flags, they will be available on the root flag object:

const isDirty = this.fields.email.dirty;

For scoped fields, their flags will be available in a property prefixed with $ to differentiate between a global level field and a scope:

const isDirty = this.fields.$scope.email.dirty;

For convenience a helper function mapFields was added to skip these checks, it maps the fields flags to the component computed property, so you would need to specify which fields you need mapped, it is similar to Vuex's mapGetters and mapActions helper functions:

<script>
import { mapFields } from 'vee-validate'

export default {
  // ...
  computed: mapFields(['name', 'email', 'scope.phone']),
 // ...
}
</script>

You can also use the object form to rename the mapped props:

<script>
import { mapFields } from 'vee-validate'

export default {
  // ...
  computed: mapFields({
    fullname: 'name',
    phone: 'scope.phone'
  }),
 // ...
}
</script>

Note that scoped fields names in the array from is mapped to a non-nested name. and you can use the object spread operator to add the mapped fields to your existing computed components:

<script>
import { mapFields } from 'vee-validate'

export default {
  // ...
  computed: {
    ...mapFields(['name', 'email', 'scope.phone']),
    myProp() {
       // ....
    }
  },
 // ...
}
</script>

The available flags are:

  • touched: The field has been focused at least once.
  • untouched: The field has not been focused at all.
  • dirty: The field value has been manipulated (even if it is the same).
  • pristine: The field has not been manipulated.
  • valid: The field has been validated at least once and is valid.
  • invalid The field has been validated at least once and is not valid.

You can set the flags using the flag method on the validator instance:

// flag the field as valid and dirty.
validator.flag('field', {
  valid: false,
  dirty: true
});

// set flags for scoped field.
validator.flag('scoped.field', {
  touched: false,
  dirty: false
});

For custom components, in order for the flags to fully work reliably, you need to emit those events:

The input event, which you probably already emit, will set the dirty and pristine flags.

this.$emit('input', value); 

The focus event which will set the touched and untouched flags.

this.$emit('focus'); 

Improvements 👏

  • The new .disable modifier halts all listening behavior for the validator. which was needed if you only want to trigger validation on demand instead of automatic, for example when a form is submitted.

  • The after and before rules now accept an inclusion flag as the second parameter, which allows the target equal date values to be valid as well. to enable it just pass any value as a second parameter.

after:target,true
  • The after and before rules now accept a date value as an alternative to the field name, note that the date must be written in the same format as the preceding date_format rule.

  • The rules with target field arguments like confirmed now respects the events you have specified using data-vv-validate-on attribute.

  • You can access the rules and dictionary objects via the read only properties on the validator instance.

  • The date_between rule also accepts moment's inclusive parameters #419

Bugs Squashed 🐛

  • The automatic class bindings now have their own listeners meaning they will be in sync with the flags. however they are not tied to the error object, meaning if you add custom errors you will have to invalidate the flags yourself using the API.

  • Can't remember the rest of the bugs, but plenty were fixed. I need to be better organized 😞.

Docs State

I will update the docs this week, so not all of the mentioned things will be updated there at least for a few days.

Don't miss a new vee-validate release

NewReleases is sending notifications on new releases.