Thursday 4 May 2017

How would I route a registration form in Express to an HTML registration modal?

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">&times;</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