代码之家  ›  专栏  ›  技术社区  ›  a coder

已禁用提交按钮,但有效的表单数据将不启用它(vee validate)

  •  3
  • a coder  · 技术社区  · 6 年前

    我正试图禁用表单的提交按钮,直到为每个控件输入有效数据。

    在为每个字段输入正确的数据后,“提交”按钮将保持禁用状态。

    标记:

    <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

    当表单完整且有效时,如果不允许提交按钮自行启用,我会怎么做?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Ryley    6 年前

    好吧,简单地说,你的情况 isComplete() 引用数据中与表单无关的值。表单中没有字段具有 v-model ,因此更改它们对中引用的变量没有影响 inComplete() .

    vee validate检查任何字段是否无效的正常方法如下:

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

    这只会在表单无效后禁用“提交”按钮,因此在页面加载时,在用户对表单执行使其无效的操作之前,它将一直处于启用状态。

    请参见此处的一个工作示例(其中一个输入具有V模型集): https://jsfiddle.net/ryleyb/v7a2tzjp/8/