CODEWITHSUNDEEP
vue.jsdisabled-controlvee-validate
a coder
a coder

Reputation: 7639

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

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?

Upvotes: 4

Views: 4434

Answers (1)

Ryley
Ryley

Reputation: 21226

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/

Upvotes: 2

Related Questions