Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial jQuery HTML5 Form Plugin - jQuery Form Plugin
#1
Cómo funciona?
Solo debe crear su formulario siguiendo el estándar HTML5 y el código se ejecutará de manera automática.
No requiere clases adicionales. El plugin toma la información que necesita del código HTML.
Se activa de manera automática cuando detecta Internet ExplorerOpera o Mozilla Firefox.
Para personalizar el comportamiento de las funciones y activarlo en todos los navegadores consultar las Características propias del plugin a continuación.

Funcionalidades HTML5.
Atributo placeholder
Código:
<input type="text" placeholder="Nombre Completo"/>
Completa automáticamente un valor por defecto para cada campo que desaparece al momento de escribir.Atributo de tipo email
Código:
<input type="email" name="email" id="email"/>
Indica al navegador que el campo contiene un email y lo valida con expresiones regulares.Atributo maxlength en Textarea
Código:
<textarea maxlength="60" name="consulta" id="consulta"/>
Este atributo conocido limita la cantidad de caracteres permitidos pero no estaba disponible para campos Textarea hasta ahora.Atributo required
Código:
<input type="text" name="nombre" required />
Indica al navegador que el campo no puede quedar vacío al momento de enviar el formulario.
Este atributo no lleva =" ", solamente se nombra dentro de la etiqueta.Atributo url

Código:
<input type="url" name="sitioweb" placeholder="http://"/>
En conjunto con el atributo placeholder, se agrega un valor por defecto. El plugin reconoce que se trata de una url mediantetype="url"
Al hacer click en el campo situa el puntero luego del prefijo http:// sin borrarlo.Atributo Autocomplete

Código:
<input type="text" name="nombre" autocomplete="off"/>
Evita que el navegador despliegue una lista de datos cargados anteriormente al seleccionar el campo.
Características propias del plugin.
Personalizar el comportamiento de envío.El formulario se envía de manera asincónica por defecto, mediante una petición Ajax al hacer click en el botón submit.
Para esto, el plugin consulta automáticamente los atributos method y action declarados en el formulario.
Para omitir el envío por defecto solo debe definir la propiedad async como false.
Si desea cambiar alguno de estos comportamientos puede hacerlo de la siguiente manera.

Código:
<script>
   
   $('#myform').html5form({
       
       async : false, // cancela el método de envío por defecto.
       method : 'GET', // cambia el request method.
       action : 'respuesta.php', // cambia el action del formulario.
       responseDiv : '#respuesta' // define un contenedor para mostrar el resultado de la petición Ajax.
       
   })
   
</script>

Múltiples formularios.En caso de contar con más de un formulario, puede definir distintas opciones para cada uno, llamando método .html5form() con su '#id'.
En el caso de utilizar directamente la etiqueta 'form', el plugin controlará de manera independiente cada formulario pero las opciones serán iguales para todos, se sugiere hacer una llamada individual por cada formulario como muestra el ejemplo.

Código:
<script>

   $('#myform_uno').html5form({
       method: 'POST',
   });

   $('#myform_dos').html5form({
       method: 'GET'
   });

</script>

Colores del texto.Permite personalizar los colores por defecto del texto en los campos.
Código:
<script>
   
   $('#myform').html5form({
   
       colorOn: '#999',
       colorOff: '#000'
   
   })
   
</script>

Mensajes de error.El plugin puede mostrar un error descriptivo en el caso de encontrar campos vacíos o un email incorrecto.
Esta verificación se realiza al momento de enviar el formulario y se encuentra deshabilitada por defecto.
El plugin cuenta con mensajes predeterminados en Inglés, Español, Italiano, Alemán, Francés, Holandés y Portugués que se activan con la propiedad messages y el código del pais.
Otro método para hacerlo, es asignando un valor para cada respuesta en las propiedades emptyMessage y emailMessage.

Código:
<script>
   
   //mensajes predeterminados en Español
   $('#myform').html5form({
   
       messages : 'es', // Opciones 'en', 'es', 'it', 'de', 'fr', 'nl', 'be', 'br'
       responseDiv : '#respuesta'
   
   })
   
   //método personalizado. tiene prioridad sobre los mensajes predeterminados
   $('#myform').html5form({
   
       emptyMessage : 'Este campo es obligatorio',
       emailMessage : 'La dirección de correo ingresada es incorrecta',
       responseDiv : '#respuesta'
   
   })
   
</script>

Esta funcionalidad tiene 3 condiciones:
  • El envío debe permanecer en modo asincrónico.

  • Cada input / textarea debe contar con su atributo title.

  • El contenedor de respuesta responseDiv debe estar declarado en la llamada al método.
Si desea contribuir con una traducción a otro idioma puede contactarse via email.
Ocultando labels.El atributo placeholder de HTML5 es sin duda alguna, muy intuitivo y fácil de implementar.
Sin embargo debemos contemplar a los usuarios que no permiten JavaScript en sus navegadores y no descuidar la semántica HTML.
Es por eso que se recomienda mantener las etiquetas label para describir cada input como se hacia hasta ahora.
Pero se incluye una funcionalidad que las elimina, evitando texto redundante y repetido. De esta manera, si un usuario accede a su formulario con JavaScript deshabilitado, no se encontrará con campos vacíos sin referencias.

Código:
<script>

   $('#myform').html5form({
       labels: 'hide'
   });

</script>

Activar en todos los Navegadores.Como mencionabamos anteriormente, los navegadores WebKit (Safari & Chrome) reconocen los nuevos formularios de manera nativa y no activan el plugin por defecto.
Sin embargo, podemos forzarlo a trabajar en todos los navegadores para contar con las Características propias.

Código:
<script>

   $('#myform').html5form({
       allBrowsers: true
   });

</script>


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Plantillas HTML5, boostrap WMasterT 6 148 07-09-2018, 02:36 PM
Último mensaje: CarlosAlberto
  APORTE, quieres aprender HTML5? GonzaloMacedo 7 297 06-09-2018, 04:33 AM
Último mensaje: jcifuentes
  jQuery: ocultar imágenes rotas Jvh_22 10 866 03-01-2017, 09:26 PM
Último mensaje: gassip
Bug [Duda] ¿Existe algun plugin para imgur? Expliquenme por favor. yuma2009 1 304 02-01-2017, 11:38 PM
Último mensaje: onspot
Estrella [Aporte] La nueva generación de jQuery tendrá cambios en su nomenclatura carlsmartg 1 407 03-08-2016, 09:23 PM
Último mensaje: Boreas
  [Duda] Como implementar Jquery.cookie llProKsll 3 466 11-02-2016, 01:55 PM
Último mensaje: Vicen
Información [Tutorial] Detectar AdBlock y mostrar mensaje (jQuery) DarkMaster 7 876 28-01-2016, 03:32 PM
Último mensaje: TapaJerez
  [Aporte] Libro html5 De distribucion libre gassip 5 718 04-01-2016, 01:27 PM
Último mensaje: Taquion
  Libro de jQuery en español CarlosAlberto 1 496 30-12-2015, 11:39 PM
Último mensaje: habacuc78
  Formulario de inicio de session con html5 luis.ml 0 1,703 16-08-2015, 12:52 AM
Último mensaje: luis.ml



Usuarios navegando en este tema: 1 invitado(s)