you forgot the prevent default.
On click @submit.prevent.
And you don't need the jquery. Form.submit will be just fine.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
<form @submit="onSubmit($event)" accept-charset="UTF-8" id="signup-form" action="signup" method="POST">
...
</form>
const url = '/signup_check/';
const rules = {
name: { required: true, max: 35, check: 'name', },
email: { required: true, email: true, max: 254, check: 'email' },
password: { required: true, min: 8, different: 'email', check: 'password' },
repassword: { required: true, confirmed: 'password' },
phonenumber: { required: true, check: 'phonenumber' },
}
const dicts = {
en: {
messages: {
required: 'You cannot leave this empty.',
},
custom: {
name: {
max: 'Name cannot longer than 35 characters.',
},
email: {
email: 'Please enter a valid email address.',
max: 'Email address cannot longer than 254 characters.',
},
password: {
min: 'Password must contain at least eight unique characters.',
different: 'Common words are easy to guess, please try another.',
},
password_confirmation: {
confirmed: 'The passwords does not match, please try again.'
}
}
}
};
let signup = new Vue({
el: '#signup-form',
data: {
rules,
firstname: '',
lastname: '',
email: '',
password: '',
password_confirmation : '',
phonenumber: '',
validated: false,
},
created() {
// custom rule: ajax check from server
const inputValidator = (value, args) => {
return axios.post( url+args, { [args]: value } )
.then((response) => {
return {
valid: true,
data: { message: '' }
};
})
.catch((error) => {
let err = error.response.data.errors;
return {
valid: false,
data: {
message: err[Object.keys(err)[0]][0]
}
};
});
};
// custom rule: different: {field}
const different = (value, target) => {
if (value === undefined || value === null) {
return false;
}
return String(value) !== document.getElementsByName(target)[0].value;
};
this.$validator.extend('check', {
validate: inputValidator,
getMessage: (field, params, data) => data.message
});
this.$validator.extend('different', different);
this.$validator.updateDictionary(dicts);
},
methods: {
registrack() {
let vm = this;
var bag = this.$validator.errors;
return axios.post( url+'registrack', this.getInputs() )
.then(function(response) {
vm.validated = true;
})
.catch(function(error) {
let err = error.response.data;
let input = Object.keys(err)[0];
// we have existing error, dont add
if (! bag.has(input)) {
bag.add(input, err[input]);
}
// focus error input
document.getElementById(input).focus();
return false;
});
},
onSubmit(event) {
// check every inputs again
this.registrack();
// if everything validated then submit the form otherwise prevent
if (this.validated) {
return this.submitForm();
} else {
event.preventDefault();
}
},
submitForm() {
return $('#signup-form').unbind('submit').submit();
},
getInputs() {
return {
firstname: this.firstname,
lastname: this.lastname,
email: this.email,
password: this.password,
password_confirmation: this.password_confirmation,
phonenumber: this.phonenumber,
};
}
}
});
The problem is after all validation true, I have to click two times on submit button before it can be submitted to server. So my question is, how can I instantly remove the preventDefault event listener after this.registrack() is done and all validated?
PS: With jQuery, I can use ajax.done to async, but not sure how to do in axios and vue.
Please or to participate in this conversation.