1

Buenos dias, como podria realizar la validación de un text_field en tiempo real con js en rails? Tengo mis validates en mi modelo, y las validaciones y vista de errores por campo se realizan pos submit, pero como lo hago para que me valide en el campo mismo sin tener que mandar submit antes. Saludos [actualizado] He probado con la gem Judge, pero no me funciona, dejo el codigo:

#views/employees/new.html.erb

      <div class = "panel panel-primary">
        <div class = "panel-heading">
         <h3> Registro de Empleado</h3>
     </div>
<%= render 'form', employee: @employee %>
</div>
#views/employees/_form.html.erb

<%= form_for(employee, :builder => Judge::FormBuilder) do |f| %>
                <div class="row row-no-top">
               <div class="col-md-6">
                <div class="field">
                  <div class="form-group <%= @employee.errors[:legajo].any? ? " has-error has-feedback" : "" %>">
                       <h1><%= f.label :legajo, "Legajo" %></h1>  
                          <%= f.text_field :legajo, :validate => true, autofocus: true,requiered:true, :class=>"form-control input-sm " ,placeholder: "Legajo" %>  
                                <%if @employee.errors[:legajo].any? %>
                                        <span class="glyphicon  form-control-feedback"><i class="fa fa-exclamation" aria-hidden="true"></i>
                                        </span>
                                        <p class="bg-warning"><%= @employee.errors[:legajo].to_s[/\w([^"]*)/] %></p>
                                <% end %>
                  </div>
                </div>
                </div>

            </div>

<% end %>

#models/employee

class Employee < ApplicationRecord
    validates :legajo, :name, :last_name,:document_number,  presence:  { message: "Campo obligatorio" }
    validates :legajo, uniqueness: { message: " El legajo ya existe" }, on: :create
    validates :legajo,  numericality: {  message: " Se permite solo numeros enteros",only_integer: true }
    validates :legajo, length: { is: 5, :message => "Debe tener 5 digitos" }
    validates :legajo, uniqueness: { message: " El legajo ya existe" },  on: :update
end

#assets/javascript/application.js
        //= require underscore
        //= require json2
        //= require judge
        ...
#config/routes
Rails.application.routes.draw do
mount Judge::Engine => '/judge'
...
end

error que aparece p el usuario al querer guardar los datos

1
  • ...pero como lo hago para que me valide en el campo mismo sin tener que mandar submit antes. La respuesta depende de como se manda el formulario, Agrega un ejemplo del HTML (reducido por favor) y el codigo javascript que uses para enviarlo (si usas alguno). Commented el 5 nov. 2016 a las 13:31

3 respuestas 3

1

Espero que esto te sirva. Básicamente está llamando la función cada vez que se "suelta" la tecla. Es decir, después de cada caracter ingresado.

Este código lo puedes poner en app/assets/javascripts/application.js, pero sería mejor que hicieras un archivo en esa misma carpeta, por ejemplo: app/assets/javascripts/validacion.js.

Nota: Asumiendo que estás utilizando la gema Turbolinks (turbolinks viene en automático incluida en cada nuevo proyecto de rails salvo que lo hayas creado con la bandera --api) En Rails 4 generalmente utilizábamos 'page:load', pero a partir de Rails 5 (Turbolinks v5) es común utilizar 'turbolinks:load' al iniciar con tu js. Puedes encontrar más detalles sobre esto en la documentación oficial de turbolinks.

$(document).on('turbolinks:load', function() {

  // en lugar de '.input' será la clase o id que identifique 
  // al campo que quieres validar
  $('.input').on('keyup', function() {
    setTimeout(function() {

      // ejemplo de un Regex para validar el formato de un email
      var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      if(emailRegex.test($('.input').val()) == true) {
        // lo que quieras que suceda si pasa la validación
      }
      else {
        // lo que quieras que suceda si NO pasa la validación
      }

    })
  })
})
6
  • Puedes utilizar rubular.com para crear/validar tus regex (regular expression)
    – Horacio
    Commented el 4 nov. 2016 a las 15:51
  • turbolinks:load no depende de si se está usando rails 4 o 5, sino de si se está usando o no la gema de turbolinks Commented el 5 nov. 2016 a las 13:28
  • Como turbolinks está en las gemas que Rails incluye por default estoy asumiendo que si la usa, y totalmente de acuerdo en que si la quita del proyecto no hace falta mayor especificación, sin embargo, a partir de rails 5 los nombres de los eventos cambiaron, y así como cuando en muchos casos utilizábamos page:change ahora utilizamos turbolinks:load en muchos de ellos. Gracias por el comentario y agregaré estas notas para mejorar la respuesta. Saludos.
    – Horacio
    Commented el 5 nov. 2016 a las 20:33
  • 1
    Dependiendo de tus necesidades y como de complejas quieres que sean las validaciones, en lugar de comprobarlo en javascript, podrías hacer un petición AJAX al servidor, hacer las validaciones allí y dar un respuesta .js Así podrías reutilizar las validaciones que tienes en el modelo y no tendrías que tenerlas duplicadas.
    – hcarreras
    Commented el 6 nov. 2016 a las 11:19
  • de esta forma que sugerís, como podría validar que un numero de documento (por ejemplo) sea único (no ingresar repetidos). saludos Commented el 9 nov. 2016 a las 12:57
0

Te recomiendo que eches un vistazo a las gemas judge o client_side_validations

Yo he usado la primera y funciona bastante bien.

Por ejemplo para un modelo típico Usuario

 # usuario.rb
 class Usuario
   validates :nombre, presence => true
   validates :apellidos, presence => true
 end

Al construir los formularios de creación de esta forma

form_for(@usuario, :builder => Judge::FormBuilder) do |f|
  f.text_field :nombre, :validate => true
  f.text_field :apellidos, :validate => true
end

te genera un formulario parecido a esto

<form method="POST" action="/usuarios" id="new_usuario">
  <input type="text" data-klass="Usuario" data-validate="[{'kind':'presence','options':{},'messages':{'blank':'Nombre no puede estar vacío'}}]" id="usuario_nombre">
  <input type="text" data-klass="Usuario" data-validate="[{'kind':'presence','options':{},'messages':{'blank':'Apellidos no puede estar vacío'}}]" name="usuario[apellidos]" id="usuario_apellidos">
</form>

Muchos más detalles y funcionalidades en la web de judge


UPDATE Si quieres que te valide los campos antes de hacer el submit, puedes añadir, por ejemplo, una clase a todos los campos que quieras validar. Yo la he llamado "validation" y luego uso la función validate que proporciona la gema judge

form_for(@usuario, :builder => Judge::FormBuilder) do |f|
  f.text_field :nombre, class: "validation", :validate => true
  f.text_field :apellidos, class: "validation", :validate => true
end

$(function() {
 $('.validation').on('input select', function() {
    judge.validate($(this)[0], {
        valid: function(element) {
                eliminaMensajeError(element);
        },
        invalid: function(element, messages) {
            muestraMensajeError (element, messages);
        }
    });
 });
});

Los métodos eliminaMensajeError y muestraMensajeError son propios y lo que hacen es resaltar el campo en rojo en error y dejarlos en verde cuando están ok

6
  • Gracias por responde. Estoy probando dicha gema, pero no realiza la validación en el momento de tipear en el campo, o estoy haciendo algo mal? Commented el 9 nov. 2016 a las 12:55
  • Si puedes, haz un update de la pregunta incluyendo todo lo que puedas de tu código y le echamos un ojo.
    – Marino
    Commented el 9 nov. 2016 a las 20:29
  • Buen dia, ahi actualice con el codigo. saludos. Commented el 10 nov. 2016 a las 13:25
  • sandovalgus he añadido lo que hago yo para validar antes de submit
    – Marino
    Commented el 10 nov. 2016 a las 20:30
  • funciono de maravilla, una ultima consulta, como resolviste el tema de uniqueness, seguir las instrucciones como dice la documentación pero no me funciona. me sigue arrojando " not allowed", con las demas validaciones funciona bien. saludos Commented el 11 nov. 2016 a las 14:45
0

Depende de tus necesidades, tienes variadas opciones.
Lo mas facil de implementar es usando la validation api de html5, aunque aún no es soportada del todo por algunos exploradores actuales. También existen varias librerías js que te pueden ayudar a validar tus formularios, como ParsleyJS o validate.js

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.