Sails.js tutorial: Validación de errores con mensajes flash

Si intentamos crear un usuario y no rellenamos los parametros requerido se producirá un error. Para ello, en este tutorial, vamos a manejar los errores mediante <strong>JQUERY</strong>, pero siempre puede tratar de usar otras opciones más atractivas.  

Publicado el 29 de Julio de 2015
Compartir

Si intentamos crear un usuario y no rellenamos los parámetros requerido se producirá un error. Para ello, en este tutorial, vamos a manejar los errores mediante JQUERY , pero siempre puede tratar de usar otras opciones más atractivas.

 

Como pudimos ver, en el método create de UserController si se generaba un error nos redireccionaba de nuevo a la vista de crear. Ahora vamos a tratar ese error de otra manera, vamos a capturarlo y notificárselo al usuario.

 

          /**
           * UserController
           *
           * @description :: Server-side logic for managing users
           * @help        :: See http://links.sailsjs.org/docs/controllers
           */

          module.exports = {
            'new': function (req, res) {
                  res.view();
              },
            index: function (req, res) {
              User.find(function foundUser (err, users) {
                if(err) return res.redirect('/user/new');
                res.view({
                  users: users
                });
              });
            },
            create: function(req, res) {
                User.create(req.params.all(), function userCreated(err, user) {
                  if (err) {
                    req.session.flash = {
                      err: err
                    }
                    return res.redirect('/user/new');
                  }
                  res.redirect('/user/show/' + user.id);
                });
            }
          };

 

Ahora añadiremos el siguiente código en el fichero new.ejs para comprobar si existe algún campo que no cumpla los requisitos del modelo:

 

          <form action="/user/create" method="POST" class="form-signin">
            <h2 class="form-signin-heading"> Crear Usuario 

            < % if(flash && flash.err) { %>
                <ul class="alert alert-success">
            < % Object.keys(flash.err).forEach(function(error) { %>
                <li><%- JSON.stringify(flash.err[error]) %></li>
            < % }) %>
            </ul>
            < % } %>

            <div class="control-group"> 
            <input type="text" class="form-control" placeholder="Nombre" name="name" required>
            </div>
            <div class="control-group">
                  <input type="text" class="form-control" placeholder="Apellidos" name="lastname" required>
                  </div>
                  <div class="control-group">
                  <input type="text" class="form-control" placeholder="Email" name="email" required>
                  < /div>
                  < div class="control-group">
                  < input id="password" type="password" class="form-control" placeholder="Contraseña" name="password" required>
                  </div>
                  <div class="control-group">
                  <input type="password" class="form-control" placeholder="Repita Contraseña" name="confirmation" required>
                  </div>
            <br/>
                  <input type="submit" class="btn btn-lg btn-primary btn-block" value="Create User"/>
                  <input type="hidden" name="_csrf" value="<%=_csrf %>"/>
          </form>

 

Lo siguiente será ir a la carpeta api/policies y crear el fichero flash.js , el cual tendrá el siguiente código:

 

            module.exports = function(req, res, next) {
            res.locals.flash = {};

            if(!req.session.flash) return next();

            res.locals.flash = _.clone(req.session.flash);

            // clear flash
            req.session.flash={};
            next();
          }


Después vamos al fichero csrf.js que se encuentra en la carpeta config y descomentamos la siguiente línea y la ponemos a true , quedando así:
 

module.exports.csrf = true;


Con esto ayudaremos a hacer nuestra web más segura, gracias al protocolo CSRF .
 

Ahora iremos a config/policies.js y modificaremos la política que se ejecutará en todas las vistas restantes ( '*' ):
 

            module.exports.policies = {
              'user': {
                'new': 'flash',
                index: 'sessionAuth',
                '*': 'flash'
              }
            };

 

Ahora iremos a la carpeta assets/js y crearemos el fichero customValidate.js con el siguiente contenido:

 

              $(document).ready(function(){

                // Validate
                // http://bassistance.de/jquery-plugins/jquery-plugin-validation/
                // http://docs.jquery.com/Plugins/Validation/
                // http://docs.jquery.com/Plugins/Validation/validate#toptions

                    $('#sign-up-form').validate({
                    rules: {
                      name: {
                        required: true
                      },
                      lastname: {
                        required: true
                      },
                      email: {
                        required: true,
                        email: true
                      },
                      password: {
                        minlength: 6,
                        required: true
                      },
                      confirmation: {
                        minlength: 6,
                        equalTo: "#password" 
                      }
                    },
                    messages: {
                      name: "Please enter your name",
                      lastname: "Please enter your lastname",
                      email: "Please enter your email with a valid structure",
                      password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 6 characters long"
                      },
                      confirmation: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 6 characters long",
                        equalTo: "Please enter the same password as above"
                      }
                    },
                    success: function(element) {
                      element.text('Success').addClass('valid')
                    }
                  });
            });


Puede bajarse el customValidate.js aquí .
 

Y finalmente vamos a views/user y en el fichero new.ejs añadimos al form lo siguiente, de manera que quedaría de la siguiente formas:
 

<form action="/user/create" method="POST" id="sign-up-form" class="form-signin">

Compartir este post

También te puede interesar...

Tecnología

Aprende a crear un Blockchain con JavaScript

18 Mayo 2023 Alfredo Barragán
Tecnología

Comparativa Arduino vs Particle vs Raspberry Pi

11 Mayo 2023 Diego Caceres Solis

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información.