Use Autoform with Toastr


#1

Is there any way i can use aldeed:autoform with chrismbeckett:toastr ?

I want to show autoform validations as toastr growl messages.


#2

I think you could use the manual validation method.


#3

Use autoform hooks. Have the hooks fire the growl in onSuccess or onError.

EDIT: Oh, as validation. I don’t know about that.


#4

You can use autoform hooks like @a.com mentioned, something like this on the client:

AutoForm.addHooks( 'formid', {
 onSuccess: function () {
    setTimeout( function () {
      toastr.options = {
        closeButton: true,
        progressBar: true,
        showMethod: 'slideDown',
        timeOut: 2000
      };
      toastr.success(
        'Successfully Created' );
    }, 1300 );
    Router.go( path to index );
  },
  onError: function () {
    setTimeout( function () {
      toastr.options = {
        closeButton: true,
        progressBar: false,
        showMethod: 'slideDown',
        timeOut: 10000
      };
      toastr.error(
        'Please review the form if you have left something empty',
        'Ooops! Something is missing.' );
    }, 1300 );
  }
} );

Hope this helps.


#5

I wasn’t sure if he wanted a faster feedback loop, like when validations show up under the form field, rather than waiting to hear back from the server.

Your example is how I handle it plus regular/basic client-side validations on the forms.


#6

My form is:

    {{#autoForm id="insertCvForm" type="insert" collection="Cvs"}}
        {{> afQuickField name="name"}}
        {{> afQuickField name="email"}}
        {{> uploadForm}}
    {{/autoForm}}

I added to the newForm.js:

AutoForm.addHooks(‘insertCvForm’),{
onSuccess: function (){
setTimeout(function (){
toastr.options = {
closeButton: true,
progressBar: true,
showMethod: ‘slideDown’,
timeout: 2000
};
toastr.success(
‘Successfully Created’ );
}, 1300);
console.log(‘success’);
},
onError: function () {
setTimeout( function () {
toastr.options = {
closeButton: true,
progressBar: false,
showMethod: ‘slideDown’,
timeOut: 10000
};
toastr.error(
‘Please review the form if you have left something empty’,
‘Ooops! Something is missing.’ );
}, 1300 );
}
}

I’m getting error : Cannot read property 'before' of undefined and Cvs is not in the window scope


#7

Did you get autoform working without the hooks? I identified the form by its id inside autoform hooks:

I used s-alert:

AutoForm.hooks({ nameFromFormIdHere: { onSuccess: function (doc, doc) { FlowRouter.go('HomeDashboardPage'); sAlert.success('Success! Your profile was created.'); }, onError: function (doc, error) { sAlert.error('Oops! Something went wrong. <br>' + error, {html: true}); } },
// etc etc etc