jonjamz / blaze-forms

Dead easy reactive forms with validation (Meteor).
https://atmospherejs.com/templates/forms
MIT License
113 stars 11 forks source link

Replicate AutoForm 'submitThenKeyup' validation #89

Closed ramijarrar closed 8 years ago

ramijarrar commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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:

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

ramijarrar commented 8 years ago

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 commented 8 years ago

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.