Previewing data with meteor-autoform

Question

I have a tabbed page layout with a form and a preview. Is there any way to validate a form with pushing the 'Preview' button, and to switch to the second tab once it's valid? Ie we are not creating anything until the 'Submit' button is pressed.

<div class="tab-content">
    <div class="tab-pane text-left fade in active" id="compose">
        {{#autoForm collection="Jobs" id="insertJobForm" type="insert"}}
            {{> afQuickField name="title" class="form-control input-lg"}}
            [more fields]
            <div class="form-group">
                <button type="submit">Preview</button>
            </div>
        {{/autoForm}}
    </div>
    <div class="tab-pane text-left" id="preview">
        <h2>{{currentFieldValue "title"}}</h2>
        [more output]
        <button type="submit">Submit</button>
    </div>
</div>

Answer 1

You can trigger the autoform's validation with AutoForm.validateForm('yourFormIdGoesHere') and extract the values with Autoform.getFormValues(yourFormIdGoesHere) or can simply serialise the form.

Then you use the values as the data context to the preview templates: {{>previewTemplate formData}} you need to create a template helpers for this.