Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

kingsley's avatar

Remove preventDefault event listener after back-end validation return true.

<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.

0 likes
6 replies
kingsley's avatar

Okay, I have change @submit to @submit.prevent.

But how can I remove the prevent listener and submit the form after this.validated is true? I want to async and wait the this.registrack() result.

Goldoni's avatar

Hallo, use again then callback

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;
          })
          .then(function() {
            //code
          }
      },
mdmohammudullaha's avatar

If you are using event.preventDefault(); then you can call event.currentTarget.submit(); to submit the form

Please or to participate in this conversation.