npm install --save mongoose-validation-helper
I wrote this package because I was tired of writing code that took mongoose validation errors and mapped them to form fields. It's not complicated but it is tedious.
This was written to work with a form submitted via jQuery $.ajax
and
rendered by React. It should work elsewhere, but I dunno; it's so simple that
I don't think there's any bias towards any particular library.
mongoose schema validation errors look something like:
{
"message": "Validation failed",
"name": "ValidationError",
"username": {
"message": "some validation rule failed",
"path": "username",
"name": "ValidatorError",
"type": "user defined",
"value": "whatever value you tried to sneak in"
}
}
Here's how you might use it with ajax and React. This is a totally incomplete example, of course, but I hope it's helpful to see it in context.
var React = require('react');
var validationHelper = require('mongoose-validation-helper');
module.exports = LoginForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var formdata = {
username: this.refs.username.getDOMNode().value.trim(),
password: this.refs.password.getDOMNode().value.trim()
};
$.ajax({
url: '/login',
dataType: 'json',
type: 'POST',
data: formdata,
success: function(data) {
// reload the page, redirect the user, whatever.
},
error: function(xhr, status, err) {
// I'm going to be showing an error message for each field using React,
// specifically through an object at this.state.error. I don't care
// about any "extra" fields mongoose may have returned, in this case.
var updatedState = {error: {}};
validationHelper.parse(xhr.responseJSON, formdata, function(result, extras) {
updatedState.error = result;
});
this.setState(updatedState);
}.bind(this)
});
},
render: function() {
return(
<div className="login-form">
<form onSubmit={this.handleSubmit} method="post">
<input type="text" ref="username">
{this.state.error.username ? <span>{this.state.error.username}</span> : ''}
<input type="text" ref="password">
{this.state.error.password ? <span>{this.state.error.password}</span> : ''}
<input type="submit" value="Log in"/>
</form>
</div>
)
}
});