How to hide error message in vue js after validation is true?

Question

Actually my problem I am checking when a particular value is valid through v-on:input. If, the value is invalid I get the response as "invalid data" and i display the same. But, when the value becomes valid, the "invalid data" is not hiding. How to I able to do so.

My code is

  methods: {
            checkLimit: function () {
                var vm = this;
                data = {};
                if (this.no != '') data['no'] = this.no;
                $.ajax({
                    url: "doc/checkNumber",
                    method: "POST",
                    data: data,
                    dataType: "JSON",
                    success: function (e) {
                          if (e.status == true) {
                                       }
                           else{
                            console.log(e.msg);
                            vm.error = e.msg;
                            }

                    },
                });
            },
}

So if status is false, I am showing as

<input type="text" class="form-control" v-model="orno" required="" 
v-on:input="checkLimit" maxlength="3"><p>{{error}}</p>

But when Status is true the error message is still present. How can I update based on the change?

zapping · Accepted Answer · 2018-09-15 08:23:42Z

2

You should set the error to '' when the e.status is true. Like this

 success: function (e) {
    if (e.status == true) {
        vm.error = '';
    } else {
       console.log(e.msg);
        vm.error = e.msg;
    }
 },

answered Sep 15, 2018 at 8:23

zapping

4,1266 gold badges40 silver badges56 bronze badges

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

Comments

B M · Accepted Answer · 2018-09-15 08:30:54Z

1

Simple: in checkLimit do vm.error=null on success. Then in the template do <p v-if="error">{{error}}</p>.

Since in vue all data is reactive p will disappear when error is falsy.

EDIT: if you want to keep the p and toggle the message do as suggested in the other comment (no v-if).

edited Sep 15, 2018 at 8:30

answered Sep 15, 2018 at 8:25

B M

4,0793 gold badges36 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to hide error message in vue js after validation is true?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related