Show error message if input field empty otherwise no message Vue.js

Question

I want to show an error message if the user does not input anything in a search box, however when they start entering input the message goes. So far I have got the error message to display but the message does not disappear once the user starts entering the

new Vue({
  el: "#app",
  name: "Hero",
  props: {
    navLink: String
  },
  data: function() {
    return {
      title: "Simple Search",
      intro: "This is a simple hero unit, a simple jumbotron-style.",
      subintro: "It uses utility classes for typography and spacing to space content out.",
      result: [],
      errors: [],
      search: "",
      loading: ""
    };
  },

  watch: {
    search: function(val) {
      if (!val) {
        this.result = [];
      }
    }
  },

  methods: {
    getData: function() {
      this.loading = true;
      fetch(`https://itunes.apple.com/search?term=${this.search}&entity=album`)
        .then(response => response.json())
        .then(data => {
          this.result = data.results;
          this.loading = false;
          console.log(data);
        });
      if (this.search) return true;
      this.errors = [];
      if (!this.search) this.errors.push("Enter search field.");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
  <template>
      <div class="jumbotron">
        <h1 class="display-4">{{title}}</h1>
        <p class="lead">{{intro}}</p>
        <hr class="my-4">
        <p v-if="errors.length">
          <b>Please correct the following error(s):</b>
        </p>
        <p v-for="(error, index ) in errors" :key="index">{{ error }}</p>
        
        <input class="form-control form-control-lg mb-3" type="search" placeholder="Search"
     aria-label="Search" v-model="search" required >
    
        <div class="loading" v-if="loading"></div>
    
        <table class="table table-sm table-light table-bordered" v-if="result.length">
          <thead class="thead-dark">
            <tr class="col-8">
              <th scope="col">Name</th>
              <th scope="col">Artist</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(result, index) in result" :key="index">
              <td>{{result.collectionName}}</td>
              <td>{{result.artistName}}</td>
            </tr>
          </tbody>
        </table>
        <button
          class="btn btn-success btn-lg btn-block mb-3"
          type="submit"
          v-on:click="getData"
          v-if="result.length < 1"
        >Get data</button>
      </div>
    </template>
</div>

code. I'm sure it is something simple but I can't see where? My code is:

I think you have mistaken the if (this.search) return true; for a block, where it's just a single statement. The next line, this.errors = []; is not part of that conditional block and will not empty the errors list when search is set. — André Laszlo
– André Laszlo, Commented Jun 17, 2019 at 9:55
As a side note, checking that search is set should be the first thing you do in getData. There's no point performing the fetch if you know it will fail. Anyway, have a look at binding a method to onkeyup or something similar here or even set up a watch for the search value. — Someone
– Someone, Commented Jun 17, 2019 at 9:55

Satyam Pathak · Accepted Answer · 2019-06-17 12:59:07Z

1

I want to show an error message if the user does not input anything in a search box, however when they start entering input the message goes.

Considering your problem -

You need two-way binding to fix this issue. No watching required !

new Vue({
  el: "#app",
  data() {
  	return {
      isValidationAllowed: false,
    	searchTerm: ''
    }
  },
  computed: {
    validated() {
      return this.isValidationAllowed && !this.searchTerm
    }
  },
  methods: {
    validate() {
      this.isValidationAllowed = true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <input type="text" v-model="searchTerm">
 <p v-if="validated">Hey You got the error</p>
 <button @click="validate">Submit </button>
</div>

edited Jun 17, 2019 at 12:59

answered Jun 17, 2019 at 10:06

Satyam Pathak

6,9603 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sole Over a year ago

But the error message should only appear if the input is empty when the submit button is pressed

Collectives™ on Stack Overflow

Show error message if input field empty otherwise no message Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related