real-time validation in rails

I recommend you take a look at the gems judge or client_side_validations

I've used the first one and it works pretty well.

For example for a typical user model

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

When building the creation forms in this way

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

generates a form similar to this

<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>

Many more details and features on the judge website

UPDATE If you want to validate the fields before doing the submit, you can add, for example, a class to all the fields you want to validate. I have called it "validation" and then I use the validate function provided by the gem 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);
        }
    });
 });
});

The methods delete MessageError and sampleMessageError are their own and what they do is highlight the field in red in error and leave them green when they are ok

I hope this helps you. Basically you are calling the function every time you "release" the key. That is, after each character entered.

This code can be put in app/assets/javascripts/application.js , but it would be better if you would make a file in that same folder, for example: app/assets/javascripts/validacion.js .

  

Note: Assuming you are using the Turbolinks gem (turbolinks comes in automatic included in each new rails project unless you have created it with the flag --api ) In Rails 4 we generally used 'page:load' , but from Rails 5 (Turbolinks v5) It is common to use 'turbolinks:load' when starting with your js. You can find more details about this in the official documentation of 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
      }

    })
  })
})

It depends on your needs, you have various options.
The easiest to implement is using the validation api of html5 , although it is not yet fully supported by some current explorers. There are also several js libraries that can help you validate your forms, such as ParsleyJS or validate.js