<input type = "text" name = "usernamedata"
placeholder = "Example@scio.com" class = "inputusername" v-validate="'required|min:4|max:16'"
data-vv-validate-on="blur"
v-model="enter_details.username">
<span class="error-msg" v-show="errors.has('usernamedata')">
Please Enter a valid username
</span>

<input type = "email" name = "emaildata"
placeholder = "Example@scio.com"
class = "class2input" v-validate="'required|email'"
data-vv-validate-on="blur" v-model="enter_details.email">
<span class="error-msg" v-show="errors.has('emaildata')">
Please enter a valid email</span>

<input type = "text" name = "firstnamedata" placeholder = "First Name"
class = "class2input" v-validate="'required|alpha'" data-vv-validate-on="blur" v-model="enter_details.firstName">
<span class="error-msg" v-show="errors.has('firstnamedata')">
Firstname can only have alphabets,and must not be empty
</span>

<input type = "text" name = "lastnamedata"
 placeholder = "Last Name"
 class = "class2input" v-validate="'alpha'"
 data-vv-validate-on="blur" v-model="enter_details.lastName">
 <span class="error-msg" v-show="errors.has('lastnamedata')">
 Last name should be in alphabets only</span>

<input type = "password" name = "passworddata"
placeholder = "Password" class = "class2input"
style="margin-bottom: 15px"
v-validate="{ required: true, regex: /^(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9!@#$%^&*]{8,16}$/ }" data-vv-validate-on="blur" v-model="enter_details.password">
 <span class="error-msg" v-show="errors.has('passworddata')">
Password must contain one lower case letter,
one uppercase letter, one number, one special
character out of !@#$%^&* and length must be from 8 to 16
</span>

<input type = "password" name = "repeatpassworddata"
placeholder = "Repeat Password"  class = "class2input"
 v-validate="'required|confirmed:passworddata'"
data-vv-validate-on="blur" v-model="enter_details.repeat_password">
 <span class="error-msg" v-show="errors.has('repeatpassworddata')">
It must be same as the password
</span>

<div class="signupbutton">
 <button type = "button" class="button-style" @click="signupMethod">Sign Up</button>
</div>

signupMethod: function () {
      const validator = new Validator({
        firstName : 'required|alpha',
        lastName: 'alpha',
        email : 'required|email',
        contact_number : 'required',
        password: { required: true, regex: /^(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9!@#$%^&*]{8,16}$/ },
        username :'required|min:4|max:16',
        contactNumber : 'required',
      })
      validator.validateAll({
        firstName: this.firstName,
        lastName : this.lastName,
        email : this.email,
        contactNumber : this.contactNumber,
        username : this.username,
        password : this.password,
        countryCode: this.countryCode,
        dob : this.dob,
      }).then((res) => {
        console.log(res)
        if(res) {
          const signupObj = {
            username: this.enter_details.username,
            email: this.enter_details.email,
            contactNumber: this.enter_details.contactNumber,
            firstName: this.enter_details.firstName,
            lastName: this.enter_details.lastName,
            dob: this.enter_details.dob,
            password: this.enter_details.password,
            countryCode: this.enter_details.countryCode
          }

          this.$store.dispatch('signupUser', signupObj).then(() => {
            this.$router.push('/mistrecord')
          })
        }
        else
        console.log("invalid data ")
      })
    },