I currently have a registration form that is running a validation function and if errors are found it refreshes the page and renders the 'register' view:
// Register User
router.post('/register', function(req, res){
var name = req.body.name;
var email = req.body.email;
var username = req.body.username;
var password = req.body.password;
var password2 = req.body.password2;
// Validation
req.checkBody('name', 'Name is required').notEmpty();
req.checkBody('email', 'Email is required').notEmpty();
req.checkBody('email', 'Email is not valid').isEmail();
req.checkBody('username', 'Username is required').notEmpty();
req.checkBody('password', 'Password is required').notEmpty();
req.checkBody('password2', 'Passwords do not match').equals(req.body.password);
var errors = req.validationErrors();
if(errors){
res.render('register',{
errors:errors
});
} else {
var newUser = new User({
name: name,
email:email,
username: username,
password: password
});
User.createUser(newUser, function(err, user){
if(err) throw err;
console.log(user);
});
req.flash('success_msg', 'You are registered and can now login');
}
});
Instead of rendering the 'register' view I want the function to send the errors to a bootstrap registration modal:
<!-- Register Modal -->
<div class="modal fade" id="registerModal" role="dialog">
<div class="modal-dialog register-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
<!-- Registration Validation -->
<div class="alert alert-success"></div>
<div class="alert alert-danger"></div>
<div class="alert alert-danger"></div>
<form method="post" action="/users/register">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" name="name">
</div>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" placeholder="Username" name="username">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" placeholder="Password" name="password2">
</div>
<button type="submit" class="btn btn-success">Sign Up</button>
<button type="button" class="btn btn-info" data-dismiss="modal" data-toggle="modal" data-target="#loginModal">Login</button>
</form>
</div>
</div><!-- /modal content-->
</div>
</div> <!-- /register Modal -->
Any ideas on how to do this with Express?
via Eric Nuss
No comments:
Post a Comment