Node.js, l'Express et de Jade - Formes
Je suis en utilisant Node.js, l'Express et de Jade et je suis à essayer de comprendre comment poster, valider & de traiter les données du formulaire.
Dans ma jade fichier que j'ai créer un formulaire de contact:
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
Je suis alors en utilisant le module " express-programme de validation pour valider le formulaire comme suit:
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
});
}
});
Il y a donc trois scénarios où mes pages est rendu, et chacun a accès à différentes variables locales:
- Lorsque la page est chargée pour la première fois (erreurs=undefined,succès=undefined)
- Lorsque le formulaire est soumis et il y a des erreurs (erreurs=array,succès=undefined)
- Lorsque le formulaire est soumis et il n'y a pas d'erreurs (erreurs=undefined,succès=true)
Donc mes principaux problèmes sont les suivants:
- Quand ma Jade page est chargée, il semble jeter une erreur lorsque je tente d'accéder à une variable qui n'existe pas. Par exemple, je veux voir si la variable "succès" est défini, et si je veux masquer le formulaire et afficher un "merci" message. Est-il un moyen facile de manipuler une variable de Jade qui sera soit défini ou une valeur?
- Lorsque le formulaire a été soumis et il y a des erreurs de validation, je veux afficher un message d'erreur (ce n'est pas un problème), mais aussi remplir le formulaire avec les variables qui ont été présentées (par exemple, si l'utilisateur a fourni un nom mais pas de mail, l'erreur de référence de l'e-mail vide mais la forme doit retenir leur nom). Au moment où le message d'erreur est affiché, mais mon formulaire est réinitialisé. Est-il un moyen facile de définir les valeurs d'entrée des champs à valeurs dans les données post?
OriginalL'auteur Craig Myles | 2012-08-10
Vous devez vous connecter pour publier un commentaire.
Vous pouvez corriger cela en utilisant des habitants.variable au lieu de simplement la variable. Vous pouvez également utiliser du javascript dans jade.
-habitants.form_model = les habitants.form_data || {};
J'ai utilisé deux façons de résoudre ce problème. La première est de re-rendre la vue et que vous passez la req.corps comme un local. J'ai une convention que les formulaires de mon utilisation form_model.de la valeur pour leurs valeurs de champ. Cette méthode fonctionne bien pour les formes simples, mais il commence à ventilation un peu quand on forme s'appuie sur des données.
La deuxième méthode est de passer votre req.corps de session puis rediriger vers une route qui rend le formulaire. Avoir cette route à la recherche d'une certaine variable de session et d'utiliser ces valeurs dans votre formulaire.
-var form_model = {} || locals.form_data;
toujours ensembleform_model = {}
, comme{}
est un objet (non défini) et, par conséquent, lalocals.form_data
ne sera jamais évalué? Si je change le code àvar form_model = locals.form_data || {}
j'obtiens toujours une erreur, car le compilateur dit queform_data
n'existe pas. Je ne comprends pas, comme cela devrait fonctionner avec Javascript normale. En ce qui concerne le point 2, j'ai mis en place votre idée de transmission de données en retour, grâce à la vue, dans mon cas, je passereq.form
oups, vous avez raison form_model est toujours {} dans mon code. Je vais le mettre à jour. J'ai également remarqué qu'il devrait en fait être des habitants.form_model.
OriginalL'auteur Pickels