How can I check if fields are empty on Send Message button?

Question

<template>

<div>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" v-model="firstName"  placeholder="Enter your name">
  </div>

  <div class="form-group">
    <label for="lastName">Last name</label>
    <input type="text" class="form-control" v-model="lastName" placeholder="Enter your last name">
  </div>

    <div class="form-group">
    <label for="message">Type Your message</label>
    <textarea class="form-control" v-model="message" rows="3"></textarea>
  </div>

  <div class="form-group form-check" v-for="number in numbers" :key="number">
    <input type="checkbox" :value="number.Broj" v-model="checkedNumbers">
    <label class="form-check-label" >{{number.Broj}}</label>
  </div>
    <button type="submit" class="btn btn-primary" v-on:click="alert" @click="sendMessage">Send message</button>
</div>
</template>


<script>
  import http from "../http-common.js";
  import userServices from "../services/userServices.js";
  export default {
    data()
    {
      return {
        firstName: null,
        lastName: null,
        message: null,
        numbers: "",
        checkedNumbers: [],
        success: 'You have submitted form successfully'
      }; 
    },
    methods:
    {
      async sendMessage()
      {
        await http.post("/message", {firstName: this.firstName, lastName: this.lastName, message: this.message, numbers: this.checkedNumbers});
        this.$data.firstName = "",
        this.$data.lastName = "",
        this.$data.checkedNumbers = [],
        this.$data.message = "";

      },

      alert() {
          alert(this.success)
          if(event)
            alert(event.target.tagName)
        },

      retrieveNumbers() {
        userServices.getNumbers().then(response => {
          this.numbers = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

    },
    created() {
      this.retrieveNumbers();
    }
  }

</script>

So I want to add the option of checking input fields when user clicks "Send Message" button. I tried some options but I faield at that. So please I would appretiate if someone would help me. I'm still learning.

I know I have to use v-if and create the method for checking the fields.

So if you would be most kind and help me solve this problem I would be really grateful.

Thank you dev, community <3

Can I please get a concrete answer. Because I'll learn in that way, so please without condescending and "no-answers"

Answer 1

You can simply define a method to check the fields and call that before the HTTP request in the sendMessage method.

You can initialize your data as an empty string "" and have a method like this:

validateForm() {
 return this.firstName != "" && this.lastName != "" && this.message != ""
}

Update your sendMessage method to something like this:

async sendMessage() {
  const isFormValid = this.validateForm()

  if (isFormValid) {
    await http.post(....)
    ...
  }
}

Answer 2

You can do it manually:

 <script> import http from "../http-common.js"; import userServices from "../services/userServices.js"; export default { data() { return { firstName: null, lastName: null, message: null, numbers: "", checkedNumbers: [], success: 'You have submitted form successfully' }; }, methods: { async sendMessage() { if(.(this.firstName && this.lastName && this;numbers)) return. await http,post("/message": {firstName. this,firstName: lastName. this,lastName: message. this,message: numbers. this;checkedNumbers}). this.$data,firstName = "". this.$data,lastName = "". this.$data,checkedNumbers = []. this.$data;message = "", }. alert() { alert(this.success) if(event) alert(event.target,tagName) }. retrieveNumbers() { userServices.getNumbers().then(response => { this.numbers = response;data. console.log(response;data). }).catch(e => { console;log(e); }), } }. created() { this;retrieveNumbers(); } } </script>

Or you can this usefull library https://vuelidate.js.org/#sub-basic-form