During registration, I am validating the user input; however, I don't know how to check if the user email exist already in the database.

What I want to do is the following: if the users email already exist then it will show a toast which says "email already exist" and if the user clicks register then it will not register and display the toast.

Here is the code:

Vue.js

data() {
    return {
      validate: false,
      loading: false,
      cpass: null,
      dialog: {
        success: false
      },
      rules: {
        password: [v => v === this.form.pass || 'Passwords do not match.',
          v => !!v || 'This field cannot be blank.'
        ]
      },
      form: {}
    }
  },
  methods: {
    submitRegistration() {
      if (this.$refs.registration.validate()) {
        let formData = new FormData()
        formData.set('type', 'customer')
        formData.set('email', this.form.email);
        formData.set('pass', this.form.pass);
        formData.set('fname', this.form.fname);
        formData.set('lname', this.form.lname);
        formData.set('address', this.form.address);
        formData.set('city', this.form.city);
        formData.set('province', this.form.province);
        formData.set('contact', this.form.contact);
        axios.post('./sql/registration.php', formData)
          .then(() => {
            this.dialog.success = true
          }).catch((error) => {
            console.error(error)
          })
      }
    },

  },
  template: `<v-container>
    <v-card elevation="0">
    <v-card-title >Customer Registration</v-card-title>
    <v-divider />
    <v-card-text>
    <v-row>
    <v-col cols="12" sm="6" md="8">
    <v-form ref="registration" v-model="validate">
    <v-row>
    <v-col cols="12" md="4"><v-text-field :rules="$rules.required" type="email" v-model="form.email" rounded filled placeholder="Email Address"/></v-col>
    <v-col cols="12" md="4"><v-text-field :rules="$rules.required" v-model="form.pass" type="password" rounded filled placeholder="Password"/></v-col>
    <v-col cols="12" md="4"><v-text-field :rules="rules.password"  v-model="cpass" type="password" rounded filled placeholder="Confirm Password"/></v-col>
    <v-col cols="12" md="6"><v-text-field :rules="$rules.required" v-model="form.fname" rounded filled placeholder="First Name"/></v-col>
    <v-col cols="12" md="6"><v-text-field :rules="$rules.required" v-model="form.lname" rounded filled placeholder="Last Name"/></v-col>
    <v-col cols="12"><v-text-field :rules="$rules.required" v-model="form.address" rounded filled placeholder="Home Address"/></v-col>
    <v-col cols="12" md="4"><v-text-field :rules="$rules.required" v-model="form.city" rounded filled placeholder="City"/></v-col>
    <v-col cols="12" md="4"><v-select :rules="$rules.required" :items="$provinces" v-model="form.province" rounded filled placeholder="Province"/></v-col>
    <v-col cols="12" md="4"><v-text-field v-model="form.contact" maxlength="11" rounded filled placeholder="Contact No." hint="e.g. 09021231234"/></v-col>
    <v-col cols="12" align="end"><v-btn :loading="loading" @click="submitRegistration" large depressed rounded color="primary">Sign Up Now</v-btn></v-col>
    </v-row>
    </v-form>
    </v-col>
    <v-col cols="12" sm="6" md="4">
    <transition appear name="slide-fade">
    <v-img height="100%" src="assets/img/customer-reg.jpg" style="border-radius: 25px;"/>
    </transition>
    </v-col>
    </v-row>
    </v-card-text>
    </v-card>
    <v-dialog v-model="dialog.success" max-width="480">
    <v-card>
    <v-card-title>Registration Complete!</v-card-title>
    <v-card-text>Welcome!  Thank you for registering an account at our shop.  You can now order apparel from any of our sellers.</v-card-text>
    <v-card-actions>
    <v-btn x-large tile depressed block color="primary" to="/sign-in">Get Started</v-btn>
    </v-card-actions>
    </v-card>
    </v-dialog>
    </v-container>`
})

php:

$type = $_POST['type'];
$password = password_hash($_POST['pass'], PASSWORD_DEFAULT);
$form = array($type, $_POST['fname'], $_POST['lname'], $_POST['address'], $_POST['city'], $_POST['province'], $_POST['contact'], $_POST['email'], $password);
$sql = $handler->prepare('INSERT INTO accounts(type, fname,lname,address,city,province,contact,email,password) VALUES(?,?,?,?,?,?,?,?,?)');
$sql->execute($form);
break;

Thank you.

CodePudding user response：

Best practice is to validate the email while filling the form itself by using @keyup, @blur or @change event as per the requirement. For Demo, I am using @keyup event to validate the email address.

Demo :

new Vue({
  el: '#app',
  data: {
    form: {
        email: null
    },
    emailMessage: ''
  },
  methods: {
    validateEmailAddress() {
      if (!this.form.email) {
        this.emailMessage = ''
        return;
      }
      // API call will be happen here to validate the entered email address.
      // For now i am just using mock response (assume you are getting this list from API or you can also get the boolean value) for the demo.
      const response = ['[email protected]', '[email protected]', '[email protected]', '[email protected]'];
      this.emailMessage = (response.includes(this.form.email)) ? 'Email already exist' : 'Hurray! Good to Go';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="email" v-model="form.email" placeholder="Email Address" @keyup="validateEmailAddress"/>
  <p>{{ emailMessage }}</p>
</div>

CodePudding user response：

You can do it in multiple ways. One way is to call a function on email input event, so that each time the user enters a character an endpoint is called to check if the email is already available.

<v-text-field type="email" v-model="form.email" placeholder="Email Address" @input="debouceCheckEmail" />

PS. You can use lodash to debounce endpoint calls to database.

import { debounce } from 'lodash';
export default {
   methods: {
     debouceCheckEmail() {
       debounce(function () {
          //check entry in database         
       }, 500);
     }
   }
}