validate

<template>
	<oc-page title="Checkbox demo" name="checkbox">
		<h5 class="row selection title">User registration form with checkbox</h5>
		<div class="container" id="checkboxes">
			<div class="row">
				<oc-form :model="form" @submit.prevent="send()">
					<div class="col-md-12">
						<oc-form-field input="oc-text-input" v-model="form.username" name="username" label="Username" />
						<oc-form-field input="oc-password-input" v-model="form.password" name="password" label="Password" />

						<oc-label-input for="agreements">I agree with agreements</oc-label-input>
						<oc-checkbox-input :value="true" v-model="form.agreements" name="agreements" />
					</div>
					<oc-submit-button-input class="btn btn-success" text="Send" />
				</oc-form>
			</div>
		</div>
	</oc-page>
</template>

<script>

import Form from "@/helpers/Form";

export default {
	name: 'Checkbox',

	data() {
		let fields = [
			{
				username: "",
				password: "",
				agreements: false,
			}
		];
		return {
			fields: fields,
			form: new Form(
				// data
				fields,
				// rules
				($, rules) => {
					return rules(
						$('agreements').required(),
						$("username")
							.required()
							.match(/^[\w]+$/, "g", {
								errorMessage: "Username could contain only word characters!"
							}),
						$("password")
							.required()
							.minlength(5, { errorMessage: "Minimal length is 5!" })
							.match(/[!@#$%^&*()]+/, "g", {
								errorMessage:
									"There should be at least one special char [!@#$%^&*()]"
							}),
					);
				}
			),
			password: '',
			agreements: false,
		}
	},
	methods: {
		send() {
			// validation
			this.form.validate().then(result => {
				console.log(result.valid);
				// you can access errors here too:
				console.log(result.errors);
				// or
				console.log(this.form.getValidator().errors());
			})
		}
	},
};

</script>

<style scoped>

	p {
		margin: 12px;
		padding: 10px;
	}

	h5 {
		margin: 40px;
		padding-left: 10px;
		background: #7c3155;
		color: #fff;
		font-size: 15px;
		line-height: 20px;
	}
</style>