Replicate AutoForm 'submitThenKeyup' validation

[ramijarrar]

Trying to achieve something similar to AutoForm's custom validation behaviors ("submitThenKeyup" or "submitThenBlur") is very difficult at the moment due to the static nature of the validation events defined on form elements. We are able to work-around this by manually triggering custom events, but it's definitely not ideal.

A few additions in core would allow for much more flexibility in this regard:

1) The ability to validate elements on submit. This is a difficult problem at the moment since the form 'submit' event isn't passed down to child elements and using an event handler on the form itself runs after the form "action".

2) A second options when creating elements, to specify validation events for after the form has been submitted (or an equivalent option)

[jonjamz]

Adding support for the first option should be simple enough. I am confused by the second option. Could you provide me with an example scenario?

[ramijarrar]

The goal is to replicate something like "submitThenKeyup" so for the second option you could do something like this:

ReactiveForms.createElement({
    template: 'foo',
    validationEvent: "submit",
    submittedValidationEvent: "keyup"
});

This isn't necessarily the cleanest solution, but it works. An alternative would be to just provide the "submitThenKeyup" or "submitThenBlur" behavior out-of-the-box, but that would obviously be less flexible (though not sure about the practical benefits)

[jonjamz]

The built-in functionality for submission behavior is very basic, and I always intended to put more effort into it and open it up for customization at some point.

Check it out here: https://github.com/meteortemplates/forms/blob/master/src/module.js#L1401-L1424

As you can see, you could stop these events from being added to the form block if you specified submitType: '' in the config. Then you could add your own event handlers directly to the form block template like you would any Meteor template.

Where you see t[MODULE_NAMESPACE].submit(); the t[MODULE_NAMESPACE] is how we access any of the methods that were added to the template by the package. You would need to use t[ReactiveForms.namespace].submit(); to get the proper namespace outside the scope of that file.

As for triggering form-wide validation in a custom way (this won't pull the values from the DOM, but it will validate whatever has been already collected) this can be done with the form block's validate method: https://github.com/meteortemplates/forms/blob/master/src/module.js#L299-L314

You should be able to call this from any event handler on the form block template using t[ReactiveForms.namespace].validate();.

Preventing elements from validating after their data is collected into the form data context is a very simple update. We just have to put some logic around this:

https://github.com/meteortemplates/forms/blob/master/src/module.js#L909

In general, if you look through the source code in that file, you should be able to figure out how things work pretty easily as it is well commented.

So far, I can see that I need to add two options:

• Allow to avoid validating when elements are rendered
• Allow to avoid validating elements after data is collected using validationValue (and probably change the name of this method)

If you want to extend the submit options to do anything fancy, I would encourage you to work up a PR.

[ramijarrar]

That is exactly what I was looking for with the form block events, most of what I am suggesting can already be accomplished by getting rid of the submitType and defining these myself.

A couple questions still remain for me: is it possible to detect if the element has been submitted from within validationValue? Is there any reason why form blocks do not automatically run validation before submission at the moment, and would you be willing to add this in core?

Thanks for your help here.

[ramijarrar]

I feel this this issue has fragmented, all I am really missing at the moment is the validation before submission. Closing in favor of #94.