Como serializar los campos de un formulario html con Jquery

Hoy vamos a compartir una función muy útil a la hora de trabajar con formularios y ajax con Jquery.

Con el siguiente código lograremos validar el formulario contra sus tipos de campos, patterns y campos obligatorios, generaremos un objeto que contenga todos los campos de un formulario con sus respectivos valores y mostraremos como enviar dichos valores por ajax.

Creamos nuestra función: serializeForm()

$.fn.serializeForm = function()
{
  var o = {};
  var i = this.serializeArray();

  $.each(i, function() {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  
  return o;

};

Validación, serialización y envío de datos:

Una vez creada nuestra función vamos a ejecutar la validación html5 sobre el formulario, también haremos uso de la función preventDefault() para evitar que el mismo active automáticamente y finalmente enviaremos nuestros datos por ajax.

$("form#formId button#enviarForm").click(function(e){

  /* Compruebo la validación html5 */
  if($("form#formId")[0].checkValidity()) {

    /* Evitamos que se ejecute el formulario */
    e.preventDefault();

    /* Serializamos los datos */
    var dataString = $("form#formId").serializeObject();

    
    /* Enviamos por ajax */

    $.ajax({

      type: "POST", /* GET */
      url: RUTA A MI PROCESO,
      data: dataString,
      success: function(result) {
       
       /* mi código para result */
      }

    });
  }

});

Recuerden SIEMPRE VALIDAR nuestros datos en el backend! La validación con html5 solo nos ayuda a mejorar nuestra experiencia de usuario y no debe ser utilizada como medida de seguridad.