how to make a form validation and then submit form in vue.js?(without plugins)

Question

I have this form and I want to make a validation on it but after i press submit button it doesn't check validation and send new data to to another component.how can I fix validation?

thank you for your help.

this is htmlcode and form:

    <form @submit.prevent="handleSubmit">
      <input type="text" required placeholder="name" v-model="firstName" />
      <div v-if="firstNameError" class="error">{{ firstNameError }}</div>
      <input type="text" required placeholder="lastname" v-model="lastName"/>
      <div v-if="lastNameError" class="error">{{ lastNameError }}</div>
      <input type="tel" required placeholder="mobilenumber" v-model="Mobile" />
      <div v-if="MobileError" class="error">{{ MobileError }}</div>
      <input type="tel" required placeholder="phonenumber" v-model="phone" />
      <div v-if="PhoneError" class="error">{{ PhoneError }}</div>
      <input type="text" required placeholder="address" v-model="address" />
      <div v-if="addressError" class="error">{{ addressError }}</div>
      <select v-model="gender">
        <option value="female">female</option>
        <option value="male">male</option>
      </select>
      <button>submit</button>
    </form>

and script code:

<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: "",
      Mobile: "",
      phone: "",
      address: "",
      gender: "",
      firstNameError: "",
      lastNameError: "",
      MobileError: "",
      PhoneError: "",
      addressError: "",
    };
  },
  methods: {
    handleSubmit() {
        this.firstNameError =
          this.firstName.length > 3
            ? ""
            : "firstName must have at least 3 character";

        this.lastNameError =
          this.lastName.length > 3
            ? ""
            : "lastName must have at least 3 character";

        this.MobileError =
          this.Mobile.length > 11
            ? ""
            : "number must have at least 11 character";
        this.PhoneError =
          this.phone.length > 11
            ? ""
            : "number must have at least 11 character";
        this.addressError =
          this.address.length > 5
            ? ""
            : "address must have at least 5 character";
        let project = {
          firstName: this.firstName,
          lastName: this.lastName,
          Mobile: this.Mobile,
          phone: this.phone,
          address: this.address,
          gender: this.gender,
        };
        console.log(project);
        fetch("http://localhost:8000/forms", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(project),
        })
          .then(() => {
            this.$router.push("/");
          })
          .catch((err) => console.log(err));
      
    },
  },
};
</script>

Answer 1

You should return directly to stop the execution of subsequent code after judging the error, like this:

      if(this.firstName.length <= 3){
        this.firstNameError = "firstName must have at least 3 character";
        return
      }
      this.firstNameError = '';
      if(this.lastName.length <= 3){
        this.lastNameError = "lastName must have at least 3 character";
        return
      }
      this.lastNameError = '';
      if(this.Mobile.length <= 11){
        this.MobileError = "number must have at least 11 character";
        return
      }
      this.MobileError = '';
      if(this.phone.length <= 11){
        this.PhoneError = "number must have at least 11 character";
        return
      }
      this.PhoneError = '';
      if(this.address.length <= 5){
        this.addressError = "address must have at least 5 character";
        return
      }
      this.addressError = '';

---

new reply:

    handleSubmit() {
      this.firstNameError =
          this.firstName.length > 3
            ? ""
            : "firstName must have at least 3 character";

        this.lastNameError =
          this.lastName.length > 3
            ? ""
            : "lastName must have at least 3 character";

        this.MobileError =
          this.Mobile.length > 11
            ? ""
            : "number must have at least 11 character";
        this.PhoneError =
          this.phone.length > 11
            ? ""
            : "number must have at least 11 character";
        this.addressError =
          this.address.length > 5
            ? ""
            : "address must have at least 5 character";

      // set a flag
      let flag = !(this.firstNameError || this.lastNameError || this.MobileError || this.PhoneError || this.addressError);
      if(flag){
        let project = {
          firstName: this.firstName,
          lastName: this.lastName,
          Mobile: this.Mobile,
          phone: this.phone,
          address: this.address,
          gender: this.gender,
        };
        console.log(project);
        fetch("http://localhost:8000/forms", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(project),
        })
          .then(() => {
            this.$router.push("/");
          })
          .catch((err) => console.log(err));
      }
    },

Answer 2

add if-else statement:

<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: "",
      Mobile: "",
      phone: "",
      address: "",
      gender: "",
      firstNameError: "",
      lastNameError: "",
      MobileError: "",
      PhoneError: "",
      addressError: "",
    };
  },
  methods: {
    handleSubmit() {
      if (
        !this.firstNameError &&
        !this.lastNameError &&
        !this.MobileError &&
        !this.PhoneError &&
        !this.addressError
      ) {
        this.firstNameError =
          this.firstName.length > 3
            ? ""
            : "firstName must have at least 3 character";

        this.lastNameError =
          this.lastName.length > 3
            ? ""
            : "lastName must have at least 3 character";

        this.MobileError =
          this.Mobile.length > 11
            ? ""
            : "number must have at least 11 character";
        this.PhoneError =
          this.phone.length > 11
            ? ""
            : "number must have at least 11 character";
        this.addressError =
          this.address.length > 5
            ? ""
            : "address must have at least 5 character";
      } else {
        let project = {
          firstName: this.firstName,
          lastName: this.lastName,
          Mobile: this.Mobile,
          phone: this.phone,
          address: this.address,
          gender: this.gender,
        };
        console.log(project);
        fetch("http://localhost:8000/forms", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(project),
        })
          .then(() => {
            this.$router.push("/");
          })
          .catch((err) => console.log(err));
      }
    },
  },
};
</script>

Answer 3

I think you just need a simple IF statement for that. Check that there is no errors, then make a request.

So, we can make it like this.

// Stop the process if there is any errors
if (this.firstNameError || this.lastNameError || this.MobileError || this.PhoneError || this.addressError) {
  return;
}

// Continue the process here
let project = {...};