Add form wide validation

Current validation is field level only. It would be great if there was the ability to validate the form as a whole with the error message appear above or below the form (preferably configurable).

My use case is I have a password and passwordConfirm fields which I want to match. Putting a validator on one or both fields won’t work as they are dependant on each other.

An alternative approach would be a formOption which runs all field validator whenever any field changes.

[zoul0813]

Here’s a custom validator I wrote for comparing two fields, and a JSFiddle example

https://jsfiddle.net/zoul0813/rukxozdk/ - using _.isEqual for more complex comparisons

https://jsfiddle.net/zoul0813/rukxozdk/4/ - without lodash, doing simple "a" == "b" check

function isEqualTo(value, field, model) {
	if(field.equals == undefined)
		return ['invalid field schema, missing `equals` property'];
	let a = model[field.equals];
	if(value == a) 
		return [];
	return ['strings do not match'];
}

Just add this to your project, then add isEqualTo to the validator array for the second password. Add an equals property to the second password fields schema pointing to the first passwords model.

[{
  type: 'input',
  inputType: 'password',
  label: 'Password',
  model: 'password',
  min: 5,
  max: 10,
  required: true,
  validator: ['string']
},
{
  type: 'input',
  inputType: 'password',
  label: 'Password (Confirm)',
  model: 'password2',
  min: 5,
  max: 10,
  required: true,
  equals: 'password',
  validator: ['string', isEqualTo]
}]

[zoul0813]

@icebob, @will-fgmnt here’s a rough draft of what I’m working on.

https://jsfiddle.net/zoul0813/z3up3rwo/

Basically just a Proxy wrapper for ValidateJs, it looks at the field’s rules property. ValidateJs.equality or any of the other validators works. You can also run multiple ValidateJs validations just by adding them to the “rules” property and calling one of the virtual functions to trigger them all (the rules property is just passed to validate() as the constraint). For simple usage, the function called on ValidateJs creates a "functionName": true constraint (for things like { email: true }).

This is just a rough draft, and I plan to clean this up quite a bit … I also hope to be able to get “form-wide validation” working so that when a field is changed, all the fields revalidate. Likely going to stick with the “field by field” validation, but plan to figure out how to get the fields to revalidate themselves by listening for a validation event.

// ValidateJs Proxy for vue-form-generator
// Use ValidateJs.equality, ValidateJs.length, ValidateJs.presence, ValidateJs.format, etc for the field `validator`
let ValidateJsObj = {}
window.ValidateJs = new Proxy(ValidateJsObj, {
    get: function get(target, name) {
        return function wrapper(value, field, model) {
            let constraint = {};
            let rules = field['rules'];
            if(rules == undefined) {
                rules = {};
                rules[name] = true;
            }
            constraint[field['model']] = rules;
            let errors = validate(model, constraint);
            if(errors != undefined && errors[field['model']])
                return errors[field['model']]
            return [];
        }
    }
});