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 >
      <div >
        <div >
          <label for=""> First Name:</label><input  placeholder="Enter first name" type="text" v-model="v$.form.firstName.$model">
          <div ></div>
          <!-- Error Message -->
          <div  v-for="(error, index) of v$.form.firstName.$errors" :key="index">
            <div >{{ error.$message }}</div>
          </div>
        </div>
      </div>

      <div >
        <div >
          <label for="">Last Name:</label><input  placeholder="Enter last name" type="text" v-model="v$.form.lastName.$model">
          <!-- Error Message -->
          <div  v-for="(error, index) of v$.form.lastName.$errors" :key="index">
            <div >{{ error.$message }}</div>
          </div>
        </div>
      </div>
    </div>


    <!-- Email Row -->
    <div >
      <label for=""> Email address</label><input  placeholder="Enter email" type="email" v-model="v$.form.email.$model">
      <div ></div>
      <!-- Error Message -->
        <div  v-for="(error, index) of v$.form.email.$errors" :key="index">
          <div >{{ error.$message }}</div>
        </div>
    </div>


    <!-- Password and Confirm Password Row -->
    <div >
      <div >
        <div >
          <label for=""> Password</label><input  placeholder="Password" type="password" v-model="v$.form.password.$model">
          <div ></div>
          <!-- Error Message -->
          <div  v-for="(error, index) of v$.form.password.$errors" :key="index">
            <div >{{ error.$message }}</div>
          </div>
        </div>
      </div>

      <div >
        <div >
          <label for="">Confirm Password</label><input @input="checkPassword()"  placeholder="Confirm Password" type="password" v-model="v$.form.confirmPassword.$model">
          <!-- Error Message -->
          <div  v-for="(error, index) of v$.form.confirmPassword.$errors" :key="index">
            <div >{{ error.$message }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Submit Button -->
    <div >
      <button  :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.

CodePudding user response：

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'

CodePudding user response：

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.