How to de(activate) a button depending on the validity of an associated form?

[brads-dev-dojo]

Hi guys,
I want to activate a form's save button only if all fields are valid. So if the validation rules of at least one form element are not met, then the button should be disabled automatically.

How can I adjust the following minimal code sample to achieve this?

Codesandbox: https://codesandbox.io/s/naiveui-form-validation-1q4wc?file=/src/Demo.vue

<template>
  <n-form inline :model="formValue" :rules="rules" ref="formRef">
    <n-form-item label="Name" path="name">
      <n-input v-model:value="formValue.name" placeholder="Input Name" />
    </n-form-item>
    <n-form-item label="Age" path="age">
      <n-input placeholder="Input Age" v-model:value="formValue.age" />
    </n-form-item>
    <n-form-item path="buttonGroup">
      <n-button type="primary" attr-type="submit">Save</n-button>
    </n-form-item>
  </n-form>
  <pre>
  {{ JSON.stringify(formValue, 0, 2) }}
  </pre>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const formRef = ref(null);
    return {
      formRef,
      formValue: ref({
        name: "",
        age: "",
      }),
      rules: {
        name: {
          required: true,
          message: "Please input your name",
          trigger: "blur",
        },
        age: {
          required: true,
          message: "Please input your age",
          trigger: ["input", "blur"],
        },
      },
    };
  },
});
</script>

I appreciate any help you can provide. :-)

[07akioni]

I think there it not be possible yet (at least no straightforward way), unless you can hook every validation of the form.

We need to new API to achieve this. I'm not sure what it should look like.

[bastian-nolte]

I was hoping that perhaps in the internal implementation of naive-ui, the validation results of the fields would be propagated to the surrounding form.

Then you could register a callback method on the form that would be called whenever the validation status changes.

What are your thoughts on this?

[07akioni]

I think this may be possible. But I don't know how much effort it will take to implement it. I feel it will need some non-trivial effort to make it work.

[bastian-nolte]

I will look at the source code of naive-ui in the following weeks to see if I can find a simple way for the implementation.

Since we are writing anyway. Thanks for the development of this UI library. Great work!

[07akioni]

If you know any other library can do it, please leave some messages.

[bastian-nolte]

I am new to vue.

With Angular, you can create a FormControl instance via FormBuilder. This FormControl then has a property valid, which is true if there are no validation issues.

Example:

  configureOrderForm() {
    this.orderForm = this.formBuilder.group({
      firstName: ["", Validators.required],
      lastName: ["", Validators.required],
      employeeAbbreviation: ["", Validators.required]
    });
  }

<button [disabled]='!isValid()' (click)="submitOrder()">Order now…</button>

[07akioni]

Thank, I'll learn it later.

I think I'll solve the issue finally. However there won't be a percise time (maybe months).

[FernandoArteaga]

As a workaround, you can use the @keydown event and validate the form

<script setup>
const isButtonValid = ref<boolean>(false)

const validateForm = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      console.log('Valid')
      isButtonValid = true
    } else {
      console.log('Invalid', errors)
      isButtonValid = false
    }
  })
}

const submit = () => {
    // submitting....
}
</script>


<template>
<n-form @keydown="validateForm">
    <n-form-item label="Name" path="name">
          <n-input  v-model:value="formValue.name" />
    </n-form-item>
</n-from>

<n-button :disabled="isButtonValid" @click="submit">
    Submit
</n-button>
</template>

[shaniqwa]

this is not a good solution, cause if you have more than 1 form input you will validate the entire form each time.
a proper solution is to have some computed property of the formRef, like "hasErrors" and then use it to enable/disable the submit button

[alanscandrett]

I presume there has been no movement on this, which is disappointing as I intended to do exactly this.
Is there some other way to determine the validity of a form?

[TheRedfoox]

Any news about it? Now I've done an implementation around n-form but I don't know how to miss out the whole fields to calculate a boolean for the submit button of my form.

const isFormValid = ref(false);

watch(
  () => registerForm.form,
  async () => {
    try {
      let response = await formRef.value?.validate();
      isFormValid.value = !response.error;
    } catch (error) {
      isFormValid.value = false;
    }
  },
  { deep: true }
);

...

<n-button :disabled="!isFormValid" attr-type="submit">Click me!</n-button>

With this method as soon as I fill in a field, the validation errors will appear on all the fields. A suggestion?

[TheRedfoox]

For those who are interested in, I made a composable 'ReactiveForm' which allows you to know the validation status of the entire form. It's a first idea, don't hesitate if you see aberrant things

export function useReactiveForm(formConfig: any = {}, formRef: any = ref(null)) {
  const form = reactive(formConfig);
  const initialForm = reactive({ ...formConfig });
  const neededKeys = ref<string[]>([]);
  const validKeys = ref<string[]>([]);
  const isValid = computed(() => {
    return _.chain(neededKeys.value)
      .every(key => validKeys.value.includes(key) && form[key] !== "")
      .value();
  });

  function validateField(key: string) {
    formRef.value?.validate(
      (errors: any[]) => {
        if (!errors) {
          if (!validKeys.value.includes(key)) {
            validKeys.value.push(key);
          }
        }
      },
      (rule: any) => {
        return rule?.key === key;
      }
    );
  }

  const reset = () => {
    _.forEach(initialForm, (value: any, key: string) => {
      form[key] = value;
    });
  };

  watch(
    () => formRef.value?.rules,
    rules => {
      neededKeys.value = _.chain(rules)
        .pickBy(rule => _.some(rule, item => item.required))
        .keys()
        .value();
    },
    { deep: true }
  );

  watch(
    () => ({ ...form }),
    newFormValue => {
      _.chain(newFormValue)
        .keys()
        .forEach(key => {
          validateField(key);
        })
        .value();
    },
    { deep: true }
  );

  return {
    form,
    reset,
    isValid,
  };
}