4

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
  • 21,046
  • 2
  • 67
  • 81
a coder
  • 7,530
  • 20
  • 84
  • 131

1 Answers1

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/

Ryley
  • 21,046
  • 2
  • 67
  • 81
  • This works very nicely thanks. Can I ask what the v-model acomplishes? – a coder Jun 22 '18 at 16:02
  • 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}}` – Ryley Jun 22 '18 at 16:04