TPS
/
birzha-legalizasia-frontend
5
0
Fork 0
Code Issues 4 Pull Requests Projects 1 Releases Wiki Activity

registration form validation

This commit is contained in:
saparatayev 2022-07-04 14:26:58 +05:00
parent bf7bea43e4
commit b918b233b4
1 changed files with 51 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/register/Main.vue
View File

@ -102,15 +102,15 @@
<input
type="text"
v-model.trim="validate.password.$model"
v-model.trim="validate.password.password.$model"
class="intro-x login__input form-control py-3 px-4 block mt-4"
:class="{ 'border-danger': validate.password.$error }"
:class="{ 'border-danger': validate.password.password.$error }"
placeholder="Password"
@keyup="sayHiWit"
/>
<template v-if="validate.password.$error">
<template v-if="validate.password.password.$error">
<div
v-for="(error, index) in validate.password.$errors"
v-for="(error, index) in validate.password.password.$errors"
:key="index"
class="text-danger mt-2"
>
@ -120,15 +120,15 @@
<input
type="text"
v-model.trim="validate.confirmPassword.$model"
v-model.trim="validate.password.confirm.$model"
class="intro-x login__input form-control py-3 px-4 block mt-4"
:class="{ 'border-danger': validate.confirmPassword.$error }"
:class="{ 'border-danger': validate.password.confirm.$error }"
placeholder="Password Confirmation"
@keyup="sayHiWit"
/>
<template v-if="validate.confirmPassword.$error">
<template v-if="validate.password.confirm.$error">
<div
v-for="(error, index) in validate.confirmPassword.$errors"
v-for="(error, index) in validate.password.confirm.$errors"
:key="index"
class="text-danger mt-2"
>
@ -155,6 +155,20 @@
<!-- END: Register Form -->
</div>
</div>
<!-- BEGIN: Failed Notification Content -->
<div
id="failed-notification-content"
class="toastify-content hidden flex"
>
<XCircleIcon class="text-danger" />
<div class="ml-4 mr-4">
<div class="font-medium">Registration failed!</div>
<div class="text-slate-500 mt-1">
Please check the fileld form.
</div>
</div>
</div>
<!-- END: Failed Notification Content -->
</div>
</template>
@ -165,18 +179,23 @@ import {
required,
minLength,
email,
sameAs
helpers
} from "@vuelidate/validators";
import { useVuelidate } from "@vuelidate/core";
import Toastify from "toastify-js";
const formData = reactive({
first_name: "",
last_name: "",
email: "",
password: "",
confirmPassword: ""
password: {
password: '',
confirm: '',
},
});
const mustBeTheSameAsPassword = (value) => value === formData.password.password
const rules = {
first_name: {
required,
@ -191,13 +210,16 @@ const rules = {
email,
},
password: {
required,
minLength: minLength(8),
password: {
required,
minLength: minLength(8)
},
confirm: {
required,
mustBeTheSameAsPassword: helpers.withMessage('Must be the same as password',
mustBeTheSameAsPassword)
},
},
confirmPassword: {
required,
sameAsPassword: sameAs(formData.password)
}
};
const validate = useVuelidate(rules, toRefs(formData));
@ -205,18 +227,18 @@ const validate = useVuelidate(rules, toRefs(formData));
const save = () => {
validate.value.$touch();
if (validate.value.$invalid) {
// Toastify({
// node: dom("#failed-notification-content")
// .clone()
// .removeClass("hidden")[0],
// duration: 3000,
// newWindow: true,
// close: true,
// gravity: "top",
// position: "right",
// stopOnFocus: true,
// }).showToast();
alert('failed')
Toastify({
node: dom("#failed-notification-content")
.clone()
.removeClass("hidden")[0],
duration: 3000,
newWindow: true,
close: true,
gravity: "top",
position: "right",
stopOnFocus: true,
}).showToast();
// alert('failed')
} else {
// Toastify({
// node: dom("#success-notification-content")
@ -233,11 +255,6 @@ const save = () => {
}
};
const sayHiWit = () => {
console.log('password: ' + formData.password)
console.log('password-conf: ' + formData.confirmPassword)
}
onMounted(() => {
dom("body").removeClass("main").removeClass("error-page").addClass("login");
});