Plugin de jQuery para habilitar un elemento con una sola sentencia

Sabemos que en Internet existen un montón de plugin que validan los elementos de un formulario. Es muy común eso de que el botón de submit no sea clicable hasta que el campo X y el campo Y no estén rellenos, seguro que lo has visto en montones de webs. Esto impide carga en el servidor ya que validamos la información desde la parte de cliente y encima nos ahorramos de hacerlo en el onsubmit inhabilitando un elemento tan vital como es el botón de submit.

Por eso, este plugin no validad, solo habilita o desabilita el atributo de lectura basándose en otros elementos. Para muestra, un botón:

<input type='button' data-enabled-if='firstname && lastname' value='Submit' />

Esto simplemente comprueba si los elementos con ID firstname y lastname tienen contenido. En el ejemplo de más arriba, estos elementos son dos cajas de texto.

Por supuesto, puedes combinar los Ids de los elementos en una expresión lógica. Por lo tanto:

<input type='button' data-enabled-if='firstname && lastname && (privacy||payment ) ' value='Submit' />

En este caso, privacy es un checkbox y payment es el nombre de un grupo de botones de radio. Uno de ellos debe estar marcado para que el botón esté habilitado (siempre que el nombre y el apellido no estén vacíos).

La siguiente declaración también acepta:

<input type='button' data-enabled-if='firstname && lastname && ! privacy' value='Submit' />

El botón se habilitará solo si firstname y lastname tienen contenido, y privacy no está marcado.

Al atributo data-enabled-if principalmente hay que proporcionarle los ID de los elementos. Si el plugin no encuentra el ID en el documento, los buscará como el nombre de un grupo de botones de radio. Este es el comportamiento para los distintos tipos de elementos:

  • Campo de texto – Devuelve true si tiene contenido
  • Textarea - Devuelve true si tiene contenido
  • Checkbox – Devuelve true si está marcado
  • Select - Devuelve true si se ha seleccionado alguna opción
  • Botón de radio (nombre) – Devuelve true si está marcado

Activa el plugin de este modo:

$(document).ready(function(){ $(".container").enabledIf();  });

Este sería el código del plugin:

(function ($) {

    $.fn.enabledIf = function () {

          this.each(function () {

              $("[data-enabled-if]").each(function () {

                  // set an id if missing

                  if ($(this).attr("id")==undefined)

                      {$(this).attr("id","obj-"+new Date().getTime());}

                  //get the attribute value

                  var att = ($(this).attr("data-enabled-if"));


                  //remove logical expression characters

                  var mod = att.replace(new RegExp("[&|()!]", "g"), ' ');


                  //split by space and remove empty items

                  var r = mod.split(' ');

                  r = r.filter(function (entry) { return entry.trim() != ''; });


                  //for any word found in array r

                  for (var i = 0; i < r.length; i++) {

                      //if it is an ID, take the corresponding element

                      var $elements = [];

                      if ($("#" + r[i]).length > 0)

                           $elements.push($("#" + r[i]));

                      else {

                         //else it's a name for radiobuttons, so take all the radios

                         $("input:radio[name='" + r[i] + "']").each(function () {

                                $elements.push($(this));

                               });

                            }

                           //for any element

                           for (var k = 0; k < $elements.length; k++) {

                              var $element = $($elements[k]);

                              //add an attribute data-enabling with value of the object to be enabled

                              $element.attr("data-enabling", $(this).attr("id"));

                              //add an attribute data-enable-group with value= logical expression

                              $element.attr("data-enable-group", att);

                              //for any change on this element:

                              $element.on('input propertychange paste change', function () {

                                 var logicalExpr = $(this).attr("data-enable-group");

                                 //check status of any element involved in the expression,

                                 //replace them with true/false

                                 //eval the expression

                                 for (var k = 0; k < r.length; k++) {

                                       var v = isElementVal(r[k]);

                                       var reg = new RegExp(r[k], "g");

                                       logicalExpr = logicalExpr.replace(reg, v);

                                 }

                                 if (eval(logicalExpr) == true) {

                                    $("#" + $(this).attr("data-enabling")).removeAttr("disabled");

                                 }

                                 else {

                                    $("#" + $(this).attr("data-enabling")).attr("disabled", "disabled");

                                 }

                           });

                           $element.change();

                      }

                 }

           });

   });

   return this;

};

function isElementVal(id) {

    var el = $("#" + id);

    //if id doesn't exists, assume it's a 'name' for a radiobuttons group

    if (el.length == 0)

         return $("input:radio[name='" + id + "']").is(":checked");


    //if it's a checkbox, return if checked

    if ($(el).is("input[type=checkbox]")) {

         return $(el).prop("checked");

         }

         else{

         //else return if it has any content

         return $.trim($("#" + id).val()) != "";
         }

}

            }(jQuery));

Fuente: Massimiliano Aronica

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.