579 lines
29 KiB
Vue
579 lines
29 KiB
Vue
<script>
|
||
import Layout from "../../layouts/main";
|
||
import PageHeader from "../../components/page-header";
|
||
|
||
import {
|
||
required,
|
||
email,
|
||
minLength,
|
||
sameAs,
|
||
maxLength,
|
||
minValue,
|
||
maxValue,
|
||
numeric,
|
||
url,
|
||
alphaNum
|
||
} from "vuelidate/lib/validators";
|
||
|
||
/**
|
||
* Form validation component
|
||
*/
|
||
export default {
|
||
components: {
|
||
Layout,
|
||
PageHeader
|
||
},
|
||
data() {
|
||
return {
|
||
title: "Form Validation",
|
||
items: [{
|
||
text: "Forms",
|
||
href: "/"
|
||
},
|
||
{
|
||
text: "Validation",
|
||
active: true
|
||
}
|
||
],
|
||
form: {
|
||
fname: "",
|
||
lname: "",
|
||
city: "",
|
||
state: "",
|
||
zipcode: ""
|
||
},
|
||
tooltipform: {
|
||
fname: "",
|
||
lname: "",
|
||
username: "",
|
||
city: "",
|
||
state: ""
|
||
},
|
||
range: {
|
||
minlen: "",
|
||
maxlength: "",
|
||
between: "",
|
||
minval: "",
|
||
maxval: "",
|
||
rangeval: "",
|
||
expr: ""
|
||
},
|
||
typeform: {
|
||
name: "",
|
||
password: "",
|
||
confirmPassword: "",
|
||
email: "",
|
||
url: "",
|
||
digit: "",
|
||
number: "",
|
||
alphanum: "",
|
||
textarea: ""
|
||
},
|
||
submitted: false,
|
||
submitform: false,
|
||
submit: false,
|
||
typesubmit: false
|
||
};
|
||
},
|
||
validations: {
|
||
form: {
|
||
fname: {
|
||
required
|
||
},
|
||
lname: {
|
||
required
|
||
},
|
||
city: {
|
||
required
|
||
},
|
||
state: {
|
||
required
|
||
},
|
||
zipcode: {
|
||
required
|
||
}
|
||
},
|
||
tooltipform: {
|
||
fname: {
|
||
required
|
||
},
|
||
lname: {
|
||
required
|
||
},
|
||
username: {
|
||
required
|
||
},
|
||
city: {
|
||
required
|
||
},
|
||
state: {
|
||
required
|
||
}
|
||
},
|
||
range: {
|
||
minlen: {
|
||
required,
|
||
minLength: minLength(6)
|
||
},
|
||
maxlength: {
|
||
required,
|
||
maxLength: maxLength(6)
|
||
},
|
||
between: {
|
||
required,
|
||
minLength: minLength(5),
|
||
maxLength: maxLength(10)
|
||
},
|
||
minval: {
|
||
required,
|
||
minValue: minValue(6)
|
||
},
|
||
maxval: {
|
||
required,
|
||
maxValue: maxValue(6)
|
||
},
|
||
rangeval: {
|
||
required,
|
||
minValue: minValue(6),
|
||
maxValue: maxValue(100)
|
||
},
|
||
expr: {
|
||
required
|
||
}
|
||
},
|
||
typeform: {
|
||
name: {
|
||
required
|
||
},
|
||
password: {
|
||
required,
|
||
minLength: minLength(6)
|
||
},
|
||
confirmPassword: {
|
||
required,
|
||
sameAsPassword: sameAs("password")
|
||
},
|
||
email: {
|
||
required,
|
||
email
|
||
},
|
||
url: {
|
||
required,
|
||
url
|
||
},
|
||
digit: {
|
||
required,
|
||
numeric
|
||
},
|
||
number: {
|
||
required,
|
||
numeric
|
||
},
|
||
alphanum: {
|
||
required,
|
||
alphaNum
|
||
},
|
||
textarea: {
|
||
required
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// eslint-disable-next-line no-unused-vars
|
||
formSubmit(e) {
|
||
this.submitted = true;
|
||
// stop here if form is invalid
|
||
this.$v.$touch();
|
||
},
|
||
|
||
tooltipForm() {
|
||
this.submitform = true;
|
||
this.$v.$touch();
|
||
},
|
||
|
||
/**
|
||
* Range validation form submit
|
||
*/
|
||
// eslint-disable-next-line no-unused-vars
|
||
rangeform(e) {
|
||
this.submit = true;
|
||
// stop here if form is invalid
|
||
this.$v.$touch();
|
||
},
|
||
/**
|
||
* Validation type submit
|
||
*/
|
||
// eslint-disable-next-line no-unused-vars
|
||
typeForm(e) {
|
||
this.typesubmit = true;
|
||
// stop here if form is invalid
|
||
this.$v.$touch();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Layout>
|
||
<PageHeader :title="title" :items="items" />
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Bootstrap Validation - Normal</h4>
|
||
<p class="card-title-desc">Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers.</p>
|
||
<form class="needs-validation" @submit.prevent="formSubmit">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label for="validationCustom01">First name</label>
|
||
<input id="validationCustom01" v-model="form.fname" type="text" class="form-control" placeholder="First name" value="Mark" :class="{ 'is-invalid': submitted && $v.form.fname.$error }" />
|
||
<div v-if="submitted && $v.form.fname.$error" class="invalid-feedback">
|
||
<span v-if="!$v.form.fname.required">This value is required.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label for="validationCustom02">Last name</label>
|
||
<input id="validationCustom02" v-model="form.lname" type="text" class="form-control" placeholder="Last name" value="Otto" :class="{ 'is-invalid': submitted && $v.form.lname.$error }" />
|
||
<div v-if="submitted && $v.form.lname.$error" class="invalid-feedback">
|
||
<span v-if="!$v.form.lname.required">This value is required.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="mb-3">
|
||
<label for="validationCustom03">City</label>
|
||
<input id="validationCustom03" v-model="form.city" type="text" class="form-control" placeholder="City" :class="{ 'is-invalid': submitted && $v.form.city.$error }" />
|
||
<div v-if="submitted && $v.form.city.$error" class="invalid-feedback">
|
||
<span v-if="!$v.form.city.required">This value is required.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="mb-3">
|
||
<label for="validationCustom04">State</label>
|
||
<input id="validationCustom04" v-model="form.state" type="text" class="form-control" placeholder="State" :class="{ 'is-invalid': submitted && $v.form.state.$error }" />
|
||
<div v-if="submitted && $v.form.state.$error" class="invalid-feedback">
|
||
<span v-if="!$v.form.state.required">This value is required.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="mb-3">
|
||
<label for="validationCustom05">Zip</label>
|
||
<input id="validationCustom05" v-model="form.zipcode" type="text" class="form-control" placeholder="Zip" :class="{ 'is-invalid': submitted && $v.form.zipcode.$error }" />
|
||
<div v-if="submitted && $v.form.zipcode.$error" class="invalid-feedback">
|
||
<span v-if="!$v.form.zipcode.required">This value is required.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-check mb-3">
|
||
<input
|
||
class="form-check-input"
|
||
type="checkbox"
|
||
value=""
|
||
id="invalidCheck"
|
||
required=""
|
||
/>
|
||
<label class="form-check-label" for="invalidCheck">
|
||
Agree to terms and conditions
|
||
</label>
|
||
<div class="invalid-feedback">
|
||
You must agree before submitting.
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col -->
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Bootstrap Validation (Tooltips)</h4>
|
||
<p class="card-title-desc">
|
||
If your form layout allows it, you can swap the
|
||
<code>.{valid|invalid}-feedback</code> classes for
|
||
<code>.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip.
|
||
</p>
|
||
<form class="needs-validation" @submit.prevent="tooltipForm">
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="mb-3 position-relative">
|
||
<label for="validationTooltip01">First name</label>
|
||
<input id="validationTooltip01" v-model="tooltipform.fname" type="text" class="form-control" placeholder="First name" value="Mark" :class="{ 'is-invalid': submitform && $v.tooltipform.fname.$error }" />
|
||
<div v-if="submitform && $v.tooltipform.fname.$error" class="invalid-tooltip">
|
||
<span v-if="!$v.tooltipform.fname.required">Please provide valid First name.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="mb-3 position-relative">
|
||
<label for="validationTooltip02">Last name</label>
|
||
<input id="validationTooltip02" v-model="tooltipform.lname" type="text" class="form-control" placeholder="Last name" value="Otto" :class="{ 'is-invalid': submitform && $v.tooltipform.lname.$error }" />
|
||
<div v-if="submitform && $v.tooltipform.lname.$error" class="invalid-tooltip">
|
||
<span v-if="!$v.tooltipform.lname.required">Please provide valid Last name.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="mb-3 position-relative">
|
||
<label for="validationTooltipUsername">Username</label>
|
||
<div class="input-group">
|
||
<div class="input-group-prepend">
|
||
<span id="validationTooltipUsernamePrepend" class="input-group-text">@</span>
|
||
</div>
|
||
<input id="validationTooltipUsername" v-model="tooltipform.username" type="text" class="form-control" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" :class="{ 'is-invalid': submitform && $v.tooltipform.username.$error }" />
|
||
<div v-if="submitform && $v.tooltipform.username.$error" class="invalid-tooltip">
|
||
<span v-if="!$v.tooltipform.username.required">Please choose a unique and valid username.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3 position-relative">
|
||
<label for="validationTooltip03">City</label>
|
||
<input id="validationTooltip03" v-model="tooltipform.city" type="text" class="form-control" placeholder="City" :class="{ 'is-invalid': submitform && $v.tooltipform.city.$error }" />
|
||
<div v-if="submitform && $v.tooltipform.city.$error" class="invalid-tooltip">
|
||
<span v-if="!$v.tooltipform.city.required">Please provide a valid city.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-3 position-relative">
|
||
<label for="validationTooltip04">State</label>
|
||
<input id="validationTooltip04" v-model="tooltipform.state" type="text" class="form-control" placeholder="State" :class="{ 'is-invalid': submitform && $v.tooltipform.state.$error }" />
|
||
<div v-if="submitform && $v.tooltipform.state.$error" class="invalid-tooltip">
|
||
<span v-if="!$v.tooltipform.state.required">Please provide a valid state.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Validation type</h4>
|
||
<p class="card-title-desc">
|
||
Parsley is a javascript form validation
|
||
library. It helps you provide your users with feedback on their form
|
||
submission before sending it to your server.
|
||
</p>
|
||
|
||
<form action="#" @submit.prevent="typeForm">
|
||
<div class="mb-3">
|
||
<label>Required</label>
|
||
<input v-model="typeform.name" type="text" class="form-control" placeholder="Type something" name="name" :class="{ 'is-invalid': typesubmit && $v.typeform.name.$error }" />
|
||
<div v-if="typesubmit && $v.typeform.name.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.name.required">This value is required.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label>Equal To</label>
|
||
<div>
|
||
<input v-model="typeform.password" type="password" name="password" class="form-control" :class="{ 'is-invalid': typesubmit && $v.typeform.password.$error }" placeholder="Password" />
|
||
<div v-if="typesubmit && $v.typeform.password.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.password.required">This value is required.</span>
|
||
<span v-if="!$v.typeform.password.minLength">Password must be at least 6 characters.</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2">
|
||
<input v-model="typeform.confirmPassword" type="password" name="confirmPassword" class="form-control" :class="{ 'is-invalid': typesubmit && $v.typeform.confirmPassword.$error }" placeholder="Re-Type Password" />
|
||
<div v-if="typesubmit && $v.typeform.confirmPassword.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.confirmPassword.required">This value is required.</span>
|
||
<span v-else-if="!$v.typeform.confirmPassword.sameAsPassword">This value should be the same.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label>E-Mail</label>
|
||
<div>
|
||
<input v-model="typeform.email" type="email" name="email" class="form-control" :class="{ 'is-invalid': typesubmit && $v.typeform.email.$error }" placeholder="Enter a valid e-mail" />
|
||
<div v-if="typesubmit && $v.typeform.email.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.email.required">This value is required.</span>
|
||
<span v-if="!$v.typeform.email.email">This value should be a valid email.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>URL</label>
|
||
<div>
|
||
<input v-model="typeform.url" type="url" name="url" class="form-control" placeholder="URL" :class="{ 'is-invalid': typesubmit && $v.typeform.url.$error }" />
|
||
<div v-if="typesubmit && $v.typeform.url.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.url.required">This value is required.</span>
|
||
<span v-if="!$v.typeform.url.url">This value should be a valid url.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Digits</label>
|
||
<div>
|
||
<input v-model="typeform.digit" type="text" name="digit" class="form-control" :class="{ 'is-invalid': typesubmit && $v.typeform.digit.$error }" placeholder="Enter only digits" />
|
||
<div v-if="typesubmit && $v.typeform.digit.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.digit.required">This value is required.</span>
|
||
<span v-if="!$v.typeform.digit.numeric">This value should be digits.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Number</label>
|
||
<div>
|
||
<input v-model="typeform.number" type="text" name="number" class="form-control" :class="{ 'is-invalid': typesubmit && $v.typeform.number.$error }" placeholder="Enter only numbers" />
|
||
<div v-if="typesubmit && $v.typeform.number.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.number.required">This value is required.</span>
|
||
<span v-if="!$v.typeform.number.numeric">This value should be a valid number.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Alphanumeric</label>
|
||
<div>
|
||
<input v-model="typeform.alphanum" type="text" name="alphanum" class="form-control" :class="{ 'is-invalid': typesubmit && $v.typeform.alphanum.$error }" placeholder="Enter alphanumeric value" />
|
||
<div v-if="typesubmit && $v.typeform.alphanum.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.alphanum.required">This value is required.</span>
|
||
<span v-if="!$v.typeform.alphanum.alphaNum">This value should be alphanumeric.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Textarea</label>
|
||
<div>
|
||
<textarea v-model="typeform.textarea" class="form-control" name="textarea" :class="{ 'is-invalid': typesubmit && $v.typeform.textarea.$error }" rows="5"></textarea>
|
||
<div v-if="typesubmit && $v.typeform.textarea.$error" class="invalid-feedback">
|
||
<span v-if="!$v.typeform.textarea.required">This value is required.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3 mb-0">
|
||
<div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
<button type="reset" class="btn btn-secondary m-l-5 ml-1">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col-->
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Range validation</h4>
|
||
<p class="card-title-desc">
|
||
Parsley is a javascript form validation
|
||
library. It helps you provide your users with feedback on their form
|
||
submission before sending it to your server.
|
||
</p>
|
||
|
||
<form action="#" @submit.prevent="rangeform">
|
||
<div class="mb-3">
|
||
<label>Min Length</label>
|
||
<div>
|
||
<input v-model="range.minlen" type="text" name="minlen" class="form-control" :class="{ 'is-invalid': submit && $v.range.minlen.$error }" placeholder="Min 6 chars." />
|
||
<div v-if="submit && $v.range.minlen.$error" class="invalid-feedback">
|
||
<span v-if="!$v.range.minlen.required">This value is required.</span>
|
||
<span v-if="!$v.range.minlen.minLength">This value is too short. It should have 6 characters or more.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Max Length</label>
|
||
<div>
|
||
<input v-model="range.maxlength" type="text" class="form-control" name="maxlength" :class="{ 'is-invalid': submit && $v.range.maxlength.$error }" placeholder="Max 6 chars." />
|
||
<div v-if="submit && $v.range.maxlength.$error" class="invalid-feedback">
|
||
<span v-if="!$v.range.maxlength.required">This value is required.</span>
|
||
<span v-if="!$v.range.maxlength.maxLength">This value is too long. It should have 6 characters or fewer.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Range Length</label>
|
||
<div>
|
||
<input v-model="range.between" type="text" class="form-control" name="between" :class="{ 'is-invalid': submit && $v.range.between.$error }" placeholder="Text between 5 - 10 chars length" />
|
||
<div v-if="submit && $v.range.between.$error" class="invalid-feedback">
|
||
<span v-if="!$v.range.between.required">This value is required.</span>
|
||
<span v-if="!$v.range.between.maxLength">This value length is invalid. It should be between 5 and 10 characters long.</span>
|
||
<span v-if="!$v.range.between.minLength">This value length is invalid. It should be between 5 and 10 characters long.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Min Value</label>
|
||
<div>
|
||
<input v-model="range.minval" type="text" name="minval" class="form-control" :class="{ 'is-invalid': submit && $v.range.minval.$error }" placeholder="Min value is 6" />
|
||
<div v-if="submit && $v.range.minval.$error" class="invalid-feedback">
|
||
<span v-if="!$v.range.minval.required">This value is required.</span>
|
||
<span v-if="!$v.range.minval.minValue">This value should be greater than or equal to 6.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Max Value</label>
|
||
<div>
|
||
<input v-model="range.maxval" type="text" class="form-control" name="maxval" :class="{ 'is-invalid': submit && $v.range.maxval.$error }" placeholder="Max value is 6" />
|
||
<div v-if="submit && $v.range.maxval.$error" class="invalid-feedback">
|
||
<span v-if="!$v.range.maxval.required">This value is required.</span>
|
||
<span v-if="!$v.range.maxval.maxValue">This value should be lower than or equal to 6.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Range Value</label>
|
||
<div>
|
||
<input v-model="range.rangeval" type="text" class="form-control" name="rangeval" :class="{ 'is-invalid': submit && $v.range.rangeval.$error }" placeholder="Number between 6 - 100" />
|
||
<div v-if="submit && $v.range.rangeval.$error" class="invalid-feedback">
|
||
<span v-if="!$v.range.rangeval.required">This value is required.</span>
|
||
<span v-if="!$v.range.rangeval.minValue">This value should be between 6 and 100.</span>
|
||
<span v-if="!$v.range.rangeval.maxValue">This value should be between 6 and 100.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label>Regular Exp</label>
|
||
<div>
|
||
<input v-model="range.expr" type="text" class="form-control" name="expr" :class="{ 'is-invalid': submit && $v.range.expr.$error }" placeholder="Hex. Color" />
|
||
<div v-if="submit && $v.range.expr.$error" class="invalid-feedback">
|
||
<span v-if="!$v.range.expr.required">This value is required.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3 mb-0">
|
||
<div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
<button type="reset" class="btn btn-secondary m-l-5 ml-1">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- end card -->
|
||
</div>
|
||
<!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
</Layout>
|
||
</template>
|