How do I solve form validation error in my code? - vue.js

Question

I am very noob in vuejs. I am trying to create vuejs form with validation. But in browser its showing nothing. In console there showing Process is not define.
This is the console error image :
<script>
import { required, email, minLength } from 'vuelidate/lib/validators'
export function validName(name) {
let validNamePattern = new RegExp("^[a-zA-Z]+(?:[-'\\s][a-zA-Z]+)*$");
if (validNamePattern.test(name)){
return true;
}
return false;
}
export default {
setup () {
return { v$: useVuelidate() }
},
data() {
return {
form: {
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
}
}
},
validations() {
return {
form: {
firstName: {
required, name_validation: {
$validator: validName,
$message: 'Invalid Name. Valid name only contain letters, dashes (-) and spaces'
}
},
lastName: {
required, name_validation: {
$validator: validName,
$message: 'Invalid Name. Valid name only contain letters, dashes (-) and spaces'
}
},
email: { required, email },
password: { required, min: minLength(6) },
confirmPassword: { required }
},
}
},
}
</script>
<template>
<form #submit.prevent="onSubmit">
<!-- First and Last Name Row -->
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for=""> First Name:</label><input class="form-control" placeholder="Enter first name" type="text" v-model="v$.form.firstName.$model">
<div class="pre-icon os-icon os-icon-user-male-circle"></div>
<!-- Error Message -->
<div class="input-errors" v-for="(error, index) of v$.form.firstName.$errors" :key="index">
<div class="error-msg">{{ error.$message }}</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="">Last Name:</label><input class="form-control" placeholder="Enter last name" type="text" v-model="v$.form.lastName.$model">
<!-- Error Message -->
<div class="input-errors" v-for="(error, index) of v$.form.lastName.$errors" :key="index">
<div class="error-msg">{{ error.$message }}</div>
</div>
</div>
</div>
</div>
<!-- Email Row -->
<div class="form-group">
<label for=""> Email address</label><input class="form-control" placeholder="Enter email" type="email" v-model="v$.form.email.$model">
<div class="pre-icon os-icon os-icon-email-2-at2"></div>
<!-- Error Message -->
<div class="input-errors" v-for="(error, index) of v$.form.email.$errors" :key="index">
<div class="error-msg">{{ error.$message }}</div>
</div>
</div>
<!-- Password and Confirm Password Row -->
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for=""> Password</label><input class="form-control" placeholder="Password" type="password" v-model="v$.form.password.$model">
<div class="pre-icon os-icon os-icon-fingerprint"></div>
<!-- Error Message -->
<div class="input-errors" v-for="(error, index) of v$.form.password.$errors" :key="index">
<div class="error-msg">{{ error.$message }}</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="">Confirm Password</label><input #input="checkPassword()" class="form-control" placeholder="Confirm Password" type="password" v-model="v$.form.confirmPassword.$model">
<!-- Error Message -->
<div class="input-errors" v-for="(error, index) of v$.form.confirmPassword.$errors" :key="index">
<div class="error-msg">{{ error.$message }}</div>
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="buttons-w">
<button class="btn btn-primary" :disabled="v$.form.$invalid" style="margin-left:120px">Signup</button>
</div>
</form>
</template>
I am trying to make form and validation also. But when I am running code it's showing nothing and in console telling process is not Define.

Answer 1

I saw that you are using useVuelidate(), but you didn't import it:
import { required, email, minLength } from 'vuelidate/lib/validators'
export function validName(name) {
...
setup () {
return { v$: useVuelidate() }
},
...
You need to add this import as well:
import useVuelidate from '#vuelidate/core'

Answer 2

The way you imported vuelidate is different from what Vuelidate documentation says. try to substitute the line below:
import { required, email, minLength } from 'vuelidate/lib/validators'
With this one:
import { required, email, minLength } from '#vuelidate/validators'
import useVuelidate from '#vuelidate/core'
This will probably removes the error. I recommend to read documentation with more details.