JQuery steps / form wizard with Aldeed:autoform

help
1

I am trying to create a form wizard with aldeed:autoform. I am trying to integrate jQuery steps (http://www.jquery-steps.com/Examples).

jQuery Steps needs the fields to be separated into fieldsets in order to activate the steps mechanism. When using Autoform & schemas, how can I split an autoform into multiple fieldsets?

Below is an example of an autoform using fieldsets, but not using schemas to structure the fields. I need a solution that outputs an autoform that relies on a schema (used for form validation & other field settings) instead of using {{> afQuickField}}.

  {{#autoForm collection="Books" id="insertBookForm" type="insert"}}
    <fieldset>
      <legend>Add a Book</legend>
      {{> afQuickField name='title'}}
      {{> afQuickField name='author'}}
      {{> afQuickField name='summary' rows=6}}
      {{> afQuickField name='copies'}}
      {{> afQuickField name='lastCheckedOut'}}
    </fieldset>
    <button type="submit" class="btn btn-primary">Insert</button>
  {{/autoForm}}
</template>```


What I am trying to achieve is this:

    {{#autoForm id="wizard"}}
    <fieldset>
                    {{> afQuickFields schema=Schemas.step1}}
    </fieldset> 

    <fieldset>
                    {{> afQuickFields schema=Schemas.step2}}
    </fieldset>           
     
    <div>
                        <button type="submit">Submit</button>
                    </div>
                    {{/autoForm}}


And my schemas would look like this:

    Schemas.step1 = new SimpleSchema({
        firstname: {
            type: String,
            label: 'First Name',
            autoform: {
                afFieldInput: {
                    type: 'text'
                },
                afFormGroup: {
                    'formgroup-class': 'col-md-6 form-group-default'
                }
            },

        },
        lastname: {
            type: String,
            label: 'Last Name',
            autoform: {
                afFieldInput: {
                    type: 'text'
                },
                afFormGroup: {
                    'formgroup-class': 'col-md-6 form-group-default'
                }
            },

        },
    }
    Schemas.step2 = new SimpleSchema({
            physicaladdress: {
                type: String,
                label: 'Physical Address',
                autoform: {
                    afFieldInput: {
                        type: 'text'
                    },
                    afFormGroup: {
                        'formgroup-class': 'col-md-6 form-group-default'
                    }
                },

            },
            postaladdress: {
                type: String,
                label: 'Postal Address',
                autoform: {
                    afFieldInput: {
                        type: 'text'
                    },
                    afFormGroup: {
                        'formgroup-class': 'col-md-6 form-group-default'
                    }
                },

            },
        }



Thanks for your assistance!
2

Solution:

Use

<fieldset>
{{> afQuickField name="fieldname"}}
{{> afQuickField name="fieldname2"}}
<fieldset>

i.e. Use afQuickField instead of afQuickFields and set schema as normal.