¿Cómo relleno los campos de formulario después de errores de validación con forma expresa?

Usando node.js y express (2.5.9) con express-form.

¿Cómo debo volver a llenar los campos del formulario con los valores enviados?

Tengo un get y post ruta. Si hay errores de validación cuando se publica el formulario, redirijo al usuario de vuelta al get, el problema es que los locales repoblados no aparecen (tengo autoLocals: true, así que asumo que es porque estoy redirigiendo y res se restablece.)

Entonces, ¿cómo repoblan ustedes y cuál es su flujo de aplicaciones? res.send en lugar de res.redirect y configurar todo de nuevo? Eso parece repetitivo.

Aquí hay un ejemplo de mi ruta de publicación:

app.post(

  '/projects/:id'

  , form(field("title").required("title", "Title is required)
  , function (req, res){

  if (!req.form.isValid){
    res.redirect('/project/'+req.params.id+'/edit');
  }
  else{
    // save to db
  }

});

preguntado el 22 de mayo de 12 a las 17:05

3 Respuestas

Estoy trabajando con expressjs4.0 para volver a llenar los campos de los formularios después de la validación que haces:

router.route('/posts/new')
 .get(function(req, res) {
 res.render('posts/new', new Post({}));
});

El segundo argumento en res.render a continuación establecerá algunas variables en la vista.

res.render('posts/new', new Post({}));

En mi opinión, configuro los campos de mi formulario de la siguiente manera:

...
<input type="text" name="title" value="<%- post.title %>">
<textarea name="article"><%- post.article %></textarea>
...

Cuando envíe este formulario, su enrutador debería capturarlo así:

router.route('/posts')
  .post(function(req, res) {
    var post = new Post(req.body)
      post.save(function(err) {
       if (err) {
         res.locals.errors = err.errors;
         res.locals.post = post;
         return res.render('posts/new');
       }
      return res.redirect('/posts');
  });
  ...
})

Esta línea de código restablece los campos del formulario en su vista

res.locals.post = post;

Espero que alguien encuentre esto útil;)

Respondido el 16 de enero de 15 a las 16:01

No estoy seguro de si es la mejor práctica, pero cuando tengo una falla de validación, no redirijo, solo vuelvo a renderizar la vista (a menudo pasando el control a la devolución de llamada 'obtener'). Algo como esto:

function loadProject(req,res, id){ /* fetch or create logic, storing as req.model or req.project */} 

function editProject(req,res){ /* render logic */ }

function saveProject(req,res){ 
    if(!req.form.isValid){ 
        editProject(req,res);
    }else{
        saveToDb(req.project);
        res.redirect('/project'+req.project.id+'/edit');
    }
}

app.param('id', loadProject);
app.get('/projects/:id/edit', editProject);
app.post('/projects/:id', saveProject);

contestado el 22 de mayo de 12 a las 18:05

Está bien. Entonces, mi problema fue el hecho de que estaba haciendo una redirección y se restableció la resolución. Sin embargo, lo que aprendí es que hay un problema separado al intentar volver a llenar campos que tienen nombres/rutas de "múltiples niveles" como project[title] (como suele ser el caso cuando se usa mangosta). No se repueblan. Voy a tener que profundizar un poco más en la forma expresa y ver si es algo que se puede solucionar. - k00k

Tuve que trabajar en un problema similar recientemente y usé dos módulos de nodo: validador y flashify.

En la vista de formulario, configuré mis campos de formulario de la siguiente manera:

div.control-group
        label.control-label Description
        div.controls
          textarea(name='eventForm[desc]', id='desc', rows='3').input-xxlarge= eventForm.desc

      div.control-group
        label.control-label Tag
        div.controls
          select(id='tag', name='eventForm[tag]')
            tags = ['Medjugorje', 'Kibeho', 'Lourdes', 'Fatima']
            for tag in tags
              option(selected=eventForm.tag == tag)= tag

Observe la convención de nomenclatura de los campos de formulario. Luego, en mi archivo de configuración, establecí una variable global, que en realidad es solo un marcador de posición para cuando se carga el formulario por primera vez:

//locals
app.locals.eventForm = []; // placeholder for event form repopulation

La lógica de validación está en mi archivo de enrutador y se ve así:

 app.post('/posts', function(req, res){
    var formData = req.body.eventForm;
    var Post = models.events;
    var post = new Post();

    post.text          = formData.desc;
    post.tag           = formData.tag;

    // run validations before saving
    var v = new Validator();
    var isPostValid = true;

    // custom error catcher for validator, which uses flashify
    v.error = function(msg) {
     res.flash('error', msg);
     isPostValid = false;
    }

    v.check(post.text, "Description field cannot be empty").notEmpty();
    v.check(post.tag, "Tag field cannot be empty").notEmpty();

Luego verifico si hay errores y, de ser así, paso los datos del formulario a la vista:

  // reject it
  res.render('Event.jade', {page: req.session.page, eventForm: formData});

Observe que estos datos de evenForm se devuelven a la vista, que vuelve a llenar los valores predeterminados.

El paso final es incluir el componente flashify en su vista de formulario.

div(style='margin-top: 60px').container-fluid
      include flashify

El código para la vista flashify se ve así:

if (flash.error != undefined)
div.container
    div.alert.alert-error
        b Oops!
        button(type='button', data-dismiss='alert').close &times;
        ul
            each error in flash.error
                li= error
if (flash.success != undefined)
div.container
    div.alert.alert-success
        b Success!
        button(type='button', data-dismiss='alert').close &times;
        ul
            each success in flash.success
                li= success

respondido 27 mar '13, 21:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.