CODEWITHSUNDEEP
vue.jsvuejs2
ItzikSpensive
ItzikSpensive

Reputation: 33

Form submit doesn't work properly when form is filled

I have a weird issue, while using vuelidate I was able to present errors when the form isn't filled correctly. But when the form is filled correctly, nothing happen when I press "Submit"

handling submit function:

submitForm() {
  this.submitted = true;
  this.$v.$touch();

  if (this.$v.$invalid) {
    return;
  } else {
    const userToPass = {
      utpFullName: this.userDetails.fullName,
      utpBusinessName: this.userDetails.businessName,
      utpEmail: this.userDetails.emailAdd,
      utpPhoneNumber: this.userDetails.phoneNumber,
      utpFacebookURL: this.userDetails.facebookURL,
      utpInstagramURL: this.userDetails.instaURL,
      utpAddress: this.userDetails.address,
      utpSpeciality: this.userDetails.speciality
    }
    console.log("User details: \n", userToPass)
    this.submitted = false;
  }
}

Some input for example:

      <div class="singleInput">
        <label>Facebook URL</label>
        <input type="text" class="input" v-model="userDetails.facebookURL" placeholder="Enter your Facebook URL">
        <span v-if="!$v.userDetails.facebookURL.url && submitted" class="errorSpan">Please enter a URL address!</span>
      </div>

When the form is filled the debugger shows the following:

Vue debugger

When the form is empty and submit is pressed:

Invalid

Upvotes: 0

Views: 128

Answers (1)

SwapRenge
SwapRenge

Reputation: 121

When the form is filled, I can see the value of $v.$invalid= true, because of that your first if condition in submitForm method evaluates and returned. Please debug why $v.$invalid is coming true or please share the source code of the same.

Upvotes: 1

Related Questions