StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PONode.js, Express and Jade - Forms
text
Body
copied!<p>I'm using Node.js, Express and Jade and I'm trying to figure out how to post, validate & process form data.</p> <p>In my jade file I create a contact form:</p> <pre><code>div#contact-area form(method='post',action='') label(for='name') Name: input(type='text',name='name',id='name') label(for='email') Email: input(type='text',name='email',id='email') input(type='submit',name='submit',value='Submit').submit-button </code></pre> <p>I'm then utilising the module 'express-validator' to validate the form as follows:</p> <pre><code>var express = require('express') ,routes = require('./routes') ,http = require('http') ,path = require('path') ,expressValidator = require('express-validator') ; var app = express.createServer(); app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); //not needed if we provide explicit file extension on template references e.g. res.render('index.jade'); app.use(express.bodyParser()); app.use(expressValidator); app.use(express.methodOverride()); app.use(app.router); }); //display the page for the first time app.get('/mypage', function(req,res){ res.render('mypage', { title: 'My Page' }); }); //handle form submission app.post('/mypage', function(req,res){ req.assert('name', 'Please enter a name').notEmpty(); req.assert('email', 'Please enter a valid email').len(6,64).isEmail(); var errors = req.validationErrors(); if( !errors){ sendEmail(function(){ res.render('mypage', { title: 'My Page', success: true }); }); } else { res.render('mypage', { title: 'My Page', errors: errors }); } }); </code></pre> <p>So there are three scenarios where my pages is rendered, and each one has access to different local variables:</p> <ol> <li>When the page is loaded for the first time (errors=undefined,success=undefined)</li> <li>When the form is submitted and there are errors (errors=array,success=undefined)</li> <li>When the form is submitted and there are no errors (errors=undefined,success=true)</li> </ol> <p>So my main problems are that:</p> <ol> <li>When my Jade page is loaded, it seems to throw an error when I attempt to access a variable that doesn't exist. For example, I want to see if the variable 'success' is set, and if it is I want to hide the form and display a "thanks" message. Is there an easy way to handle a variable in Jade that will either be undefined or a value?</li> <li>When the form has been submitted and there are validation errors, I want to show an error message (this isn't a problem) but also populate the form with the variables that were previously submitted (e.g. if the user provided a name but no email, the error should reference the blank email but the form should retain their name). At the moment the error message is displayed but my form is reset. Is there an easy way to set the input values of the fields to the values in the post data?</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload