You can validate your forms by adding validation rules to your form data.
data() {
return {
form: this.createForm({
user: new UserModel({
name: "varie",
email: "[email protected]"
}),
}).validation({
rules: {
user: {
name: "required|min:2|max:255",
email: "required|email"
},
},
})
};
}You can then use form.isValid() and form.errors() to add additional functionality to your forms
<pre>
{{ form.errors() }}
</pre>
<button :disabled="!form.isValid()">Submit</button>To attach errors to your inputs we can use the varie form directive along with what fields you wish to validate
<form v-form="form" @submit.prevent="doSomeAction()">
<input type="text" name="user.name" v-model="form.user.name" validate />
<input type="text" name="user.email" v-model="form.user.email" validate />
<button :disabled="!form.isValid()">Submit</button>
</form>[{.alert} Important : you must map to your values location in the form by using the name attribute]
The field under validation must be yes, on, 1, or true.
The field under validation must be a date (JavaScripts Date / ISO8601 / RFC3339 format) that's after the specified date (defaults to now).
The field under validation must be a date (JavaScripts Date / ISO8601 / RFC3339 format) that's after or equal to the specified date (defaults to now).
The field under validation must contains only letters (a-zA-Z).
The field under validation must contains only letters and numbers.
The field under validation must be an array.
The field under validation must be a date (JavaScripts Date / ISO8601 / RFC3339 format) that's before the specified date (defaults to now).
The field under validation must be a date (JavaScripts Date / ISO8601 / RFC3339 format) that's before or equal to the specified date (defaults to now).
The field under validation must have a size between the given min and max. Strings, numerics, arrays, and files are evaluated in the same fashion as the size rule.
The field under validation must be able to be cast as a boolean. Accepted input are true, false, 1, 0, "1", and "0".
The field under validation must have a matching field of fooConfirmation. For example, if the field under validation is password, a matching passwordConfirmation field must be present in the input.
The field under validation must be a valid date.
The field under validation must have a different value than field.
The field under validation must be a valid email.
The file under validation must be an image (jpg, jpeg, png, bmp, gif, or svg)
The field under validation must be an integer.
The field under validation must be less than or equal to a maximum value. Strings, numerics, arrays, and files are evaluated in the same fashion as the size rule.
The file under validation must match one of the given MIME types.
The field under validation must be greater than or equal to a minimum value. Strings, numerics, arrays, and files are evaluated in the same fashion as the size rule.
The field under validation may be null. This is particularly useful when validating primitive such as strings and integers that can contain null values.
The field under validation must be numeric.
The field under validation must match the given regular expression.
The field under validation must be present in the input data and not empty. A field is considered "empty" if one of the following conditions are true:
- The value is null.
- The value is an empty string.
- The value is an empty array or empty Countable object.
The field under validation must be present and not empty if the anotherfield field is equal to any value.
The field under validation must be present and not empty unless the anotherfield field is equal to any value.
The field under validation must be present and not empty only if any of the other specified fields are present.
The field under validation must be present and not empty only if all of the other specified fields are present.
The field under validation must be present and not empty only when any of the other specified fields are not present.
The field under validation must be present and not empty only when all of the other specified fields are not present.
The given field must match the field under validation.
The field under validation must have a size matching the given value. For string data, value corresponds to the number of characters. For numeric data, value corresponds to a given integer value. For an array, size corresponds to the count of the array. For files, size corresponds to the file size in kilobytes.
The field under validation must be a string. If you would like to allow the field to also be null, you should assign the nullable rule to the field.
The field under validation must be a valid URL.
To use custom error messages add a messages object :
data() {
return {
form: this.createForm({
user: new UserModel({
name: "varie",
email: "[email protected]"
}),
}).validation({
rules: {
user: {
name: "required|min:2|max:255",
email: "required|email"
},
},
messages: {
user : {
name : 'This is not a valid name'
}
}
})
};
}To create custom validation rules use the varie cli tool which will place the new rule inside the app/rules folder :
$varie make:rule NewRule
You then can define how the validation passes, and the message that it will display to the user.
If you would like change your phrasing of the errors you can change that inside your resources/lang/xx/validation language file.