Disabled submit button, but valid form data will not enable it (vee-validate)

Question

I'm attempting to disable my form's submit button until valid data is entered for each of the controls.

After entering correct data for each of the fields, the submit button remains disabled.

Markup:

<div id="app">
  <form action='#' method='POST'>

    <div class="columns">

      <div class="column">
        <div class="field">
          <div class="control">
            <label class="label">Last Name</label>
            <input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('lastname') }" class="input" name="lastname" type="text">
            <span v-show="errors.has('lastname')" class="help is-danger">{{ errors.first('lastname') }}</span>
          </div>
        </div>
      </div>

      <div class="column">
        <div class="field">
          <div class="control">
            <label class="label">Desk Number</label>
            <input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('desknum') }" class="input" name="desknum" type="text">
            <span v-show="errors.has('desknum')" class="help is-danger">{{ errors.first('desknum') }}</span>
          </div>
        </div>
      </div>
    </div>

    <button :disabled='!isComplete' class="button is-link" name='submit_data' value='go'>Submit</button>
  </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.0.9/vee-validate.min.js">
<script>

            Vue.use(VeeValidate);
            new Vue({
              el: "#app",
              template: '#app',
              data() {
                return {
                  p_pat_name_first: null,
                  p_pat_name_last: null,
                  p_pat_date_birth: null,
                  p_pat_gender: null,
                  p_pat_twin: null,
                  p_emory_id: null,
                  p_mother_name_first: null,
                  p_mother_name_last: null,
                  p_parent_phone_primary: null,
                };
              },
              computed: {
                isComplete() {
                  return
                  this.p_pat_name_first &&
                    this.p_pat_name_last &&
                    this.p_pat_date_birth &&
                    this.p_pat_gender &&
                    this.p_pat_twin &&
                    this.p_mother_name_first &&
                    this.p_mother_name_last &&
                    this.p_parent_phone_primary;
                }
              }
            });

</script>

Fiddle

What am I doing wrong that is not allowing the Submit button to enable itself when the form is complete and valid?

Ryley · Accepted Answer · 2018-06-22 15:56:30Z

2

Well, simply put, your condition in isComplete() refers to values in your data that have no bearing on the form. None of the fields in your form have a v-model, so changing them has no effect on the variables referenced in inComplete().

The normal way in vee-validate to check if any fields are not valid is like this:

<button :disabled="errors.any()" type="submit">Submit</button>

That will only disable the Submit button after the form becomes invalid, so on page load it will look enabled until the user does something to the form that makes it invalid.

See a working example here (with one input having v-model set): https://jsfiddle.net/ryleyb/v7a2tzjp/8/

answered Jun 22, 2018 at 15:56

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

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

2 Comments

a coder Over a year ago

This works very nicely thanks. Can I ask what the v-model acomplishes?

Ryley Over a year ago

v-model links your data elements to the input field. So in my fiddle, whatever you type in the last name input magically becomes the value in p_pat_name_last - you can check by adding a console.log(this.p_pat_name_last) in the doSubmit method, or anywhere in the html add {{p_pat_name_last}}

Collectives™ on Stack Overflow

Disabled submit button, but valid form data will not enable it (vee-validate)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related