Based on the AutoForm and Collection2 documentation, I’m under the impression that schema validation errors should be shown to the user automatically by AutoForm (error message plus highlight the bad field.) This isn’t happening for me. I get no user feedback at all. Defining an onError handler with an alert works but is pretty crude from a UI perspective.
Am I doing something wrong or am I just under a false impression?
I have the following form built with AutoForm to update some custom values in Meteor.users. I’m using afQuickFields rather than QuickForm because I want a different layout than QuickForm provides.
.html
<template name="updateProfileForm">
{{#autoForm id="updateProfileForm" collection="Meteor.users" doc=currentUser type="update"}}
<div class='row'>
<div class='col-md-4'>
{{> afQuickField name="wraithnotes.firstName" label='First Name'}}
</div>
</div>
<div class='row'>
<div class='col-md-4'>
{{> afQuickField name="wraithnotes.lastName" label='Last Name'}}
</div>
</div>
<div class="row">
<div class="col-md-2">
{{> afQuickField name="wraithnotes.POLInterval" label="POL Interval (days)"}}
</div>
</div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
{{/autoForm}}
</template>
schema.js
Schemas.wraithnotes = new SimpleSchema({
POLInterval: {
type: SimpleSchema.Integer,
min: 10,
max: 999,
optional: true
},
firstName: {
type: String,
regEx: /^[a-zA-Z-]{2,25}$/,
optional: true,
},
lastName: {
type: String,
regEx: /^[a-zA-Z]{2,25}$/,
optional: true,
},
});
.js
AutoForm.hooks({
updateProfileForm: {
onError: function(formType, error) {
alert(error.message);
console.log("onError:", error.message, "formType:", formType);
console.log("validation context:", AutoForm.getValidationContext(this.formId));
}
}
});
If I submit the form with a bad value (setting POLInterval to 9999 for instance) the onError function is called and an alert pops up. but the field isn’t hightlighted and no error is displayed on the form.