trigger validation and show error visibly on field (programmatically)

[chesterlaykin]

Hi!
I have a date field for which I have tried the validation-visibility rules "live", "dirty", "submit" (I didn't see any info on validation-visibility in the docs by the way) . I am disabling the submit button until the form is valid , so I can't use "submit" , and I don't want to show the error immediatly.

So I thought , if the user tries to click the disabled Submit button, I could trigger a validation on the date field and make the error appear, if there were such a function available?
But I didn't find any methods in the api that seem to fit , but I can use a ref on the form and get myFormRef.value?.node.children , and get the date input. It has a "store" property with the validation rules, and such a rule has a "visible" boolean.
Is there a way to toggle this boolean programmatically maybe?

[justin-schroeder]

The validation-visibility docs are here: https://formkit.com/essentials/validation#showing-errors

What you are describing is one of the reasons why having disabled submit buttons is not a best practice. Even if you had a way to do this users would not assume they can click a disabled button. I would recommend leaving the submit button clickable. If you really want it to appear disabled until fully valid, you can just add a stylistic class instead.

Validation is not ever actually "triggered" it is continually evaluated and only displayed based on validation-visibility conditions (this is how it knows the validity state even when messages are not being shown). If you really want to "force" a visibility state you can add a message to the store of a given node (the date node in your case) programatically:

// where `node` is the FormKitNode of the date input.
node.store.set(
  createMessage({ key: 'blurred', visible: false, value: true })
)

Good luck! 👍

[chesterlaykin]

Thanks for the quick reply! Yes, it might be better to leave it clickable, I can consider that..
I tried the "createMessage" thing, nothing happened, but when I set "visible:true" instead, it is shown "true" beneath the field , in a grey text, It got a "data-message-type="state"" on the <li> instead of data-message-type="validation" (which it needs to turn red it seems). So I can try to mess with that a bit more maybe.. The input only has "required" as validation so I noticed that is had a "rule_required" property (inside "store") when it's in error.
Anyway, thanks for the suggestions.

[tjiang4966]

Hi, I found a workaround for your case.

<template>
  <FormKit
    ref="formRef"
  />
</template>
<script>
const gameFormRef: Ref = ref(null);
</script>

With this idea you can access to the validity of the form by
formRef.value.node.context.state.valid

My FormKit version is 1.2.2