2012-08-10 26 views
5

Estoy usando Node.js, Express y Jade y estoy tratando de averiguar cómo publicar, validar los datos del formulario de proceso &.Node.js, Express y Jade - Formas

En mi archivo de jade puedo crear un formulario de contacto:

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 

entonces estoy utilizando el módulo de 'express-validador' para validar el formulario de la siguiente manera:

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 
     }); 
    } 
}); 

Así que hay tres escenarios donde se representan mis páginas, y cada uno tiene acceso a diferentes variables locales:

  1. Cuando se carga la página para la primera vez (errors = undefined, success = undefined)
  2. Cuando se envía el formulario y hay errores (errors = array, success = undefined)
  3. Cuando se envía el formulario y no hay errores (errors = undefined) , el éxito = true)

Así que mis principales problemas son que:

  1. cuando se carga mi página de Jade, que parece arrojar un error cuando intento acceder a una variable que no existe. Por ejemplo, quiero ver si la variable 'éxito' está configurada, y si es así, quiero ocultar el formulario y mostrar un mensaje de agradecimiento. ¿Hay alguna manera fácil de manejar una variable en Jade que sea indefinida o un valor?
  2. Cuando se ha enviado el formulario y hay errores de validación, quiero mostrar un mensaje de error (esto no es un problema) pero también rellenar el formulario con las variables que se enviaron anteriormente (por ejemplo, si el usuario proporcionó un nombre pero no hay un correo electrónico, el error debe hacer referencia al correo electrónico en blanco, pero el formulario debe conservar su nombre). En este momento, aparece el mensaje de error pero mi formulario se restablece. ¿Existe una manera fácil de establecer los valores de entrada de los campos a los valores en los datos de la publicación?

Respuesta

1
  1. Usted puede arreglar que mediante el uso locals.variable en lugar de sólo la variable. También puedes usar javascript en jade.

    -locals.form_model = locals.form_data || {};

  2. Usé dos formas de resolver este problema. El primero es volver a renderizar la vista y pasa el elemento requerido como local. Tengo una convención de que mis formularios usan form_model.value para sus valores de campo. Este método funciona bien para formularios simples pero comienza a descomponerse un poco cuando se forma depende de los datos.

    El segundo método es pasar su req.body a la sesión y luego redirigir a una ruta que representa el formulario. Haga que esa ruta busque una determinada variable de sesión y use esos valores en su formulario.

+0

Hola, gracias por la respuesta. Sin embargo, ¿no sería su código '-var form_model = {} || locals.form_data; 'always set' form_model = {} ', como' {} 'es un objeto (no indefinido) y, por lo tanto,' locals.form_data' nunca se evaluará. Si cambio el código a -'var form_model = locals.form_data || {} 'Aún recibo un error, ya que el compilador dice que' form_data' no existe. No entiendo esto, ya que esto debería funcionar con Javascript normal. Con respecto al punto 2, he implementado su idea de pasar los datos de regreso a la vista, en mi caso paso 'req.formulario' –

+0

woops, tienes razón form_model es siempre {} en mi código. Lo actualizaré. También me di cuenta de que debería ser locals.form_model. – Pickels

Cuestiones relacionadas