Не может отправить данные в API, только если форма проходит необходимые проверки в vuejs
Это мой HTML-файл, который имеет форму регистрации:
<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>
Это мой файл signupform.js, где яsignupMethod
'который объявляет валидации в полной форме, здесь я пытаюсь отправить данные в API, только если все валидации выполнены, и если нет, то появляется ошибка в консоли, но в моем состоянии, даже если форма заполнена по-прежнему он печатает неверные данные в консоли.
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 ")
})
},
Я становлюсь недействительным в обоих случаях, когда я правильно заполняю форму, а также когда я не заполняю форму в соответствии с проверками.