Really Simple Validation (JS) Como validar un formulario de contacto con jQuery. Actualización: Acabo de publicar un tutorial para usuarios avanzados de como hacer un formulario de contacto similar a este, capaz de enviar mensaje sin recargar la pagina usando AJAX, todo en un solo tutorial.
Importante: este tutorial de jQuery es de dificultad avanzada, si no conoces muy bien los eventos de jQuery o si no sabes nada de jQuery te recomiendo que por favor revises lo siguientes tutoriales: Esta es la continuación de este tutorial, la primera solo trata de HTML y CSS, si deseas saltarte ese paso puedes descargarte el resultado final de aquel tutorial en este enlace. Preparación Empezamos abriendo el archivo index.html y lo primero que vamos a hacer es incluir a jQuery en el documento (utilizando el CDN de Google): Luego añadimos clases a cada uno de los elementos que están dentro del formulario para poder identificarlos y seleccionarlos con jQuery. funciones.js Creamos un evento $(“.boton”).click seleccionando al boton de envio y dentro ponemos que: Explicación Un poco de CSS… Como Hacer un Formulario de Contacto III: Validar y Enviar con PHP.
Actualización: Acabo de publicar un tutorial para usuarios avanzados de como hacer un formulario de contacto similar a este, capaz de enviar mensaje sin recargar la pagina usando AJAX, todo en un solo tutorial.
En este tutorial veremos como validar nuestro formulario del lado del servidor con PHP, ademas hacer que se envie el mensaje a una dirección de correo electrónico que le definamos. Antes de empezar Importante: en este tutorial vamos a trabajar con el metodo de envio POST, si no conoces este tema te recomendaria que le eches un ojo a este tutorial antes de seguir. Ya que vamos a trabajar con PHP, es necesario que tengas instalado en tu sistema un servidor local que soporte PHP.
Luego tenemos que cambiar la extension del archivo index.html a index.php: Te recomendaria tambien que desactives el Javascript del explorador en el que estes probando el formulario, para que te puedas asegurar que la validación del lado del servidor esta funcionando. Validación Envio Código final: index.php. jQuery Ketchup Plugin - Documentation. Ketchup is a small (3.4KB minified & gzipped) jQuery Plugin that helps you to validate your forms.
Out of the box it has 18 basic validations and a bubble like style. But truly this Plugin wants to be hacked to fit your needs. Easily write your own validations and overwrite/extend the default behaviour. Bubbles are not for everyone... Default Behavior If you like the style of the bubbles and all validations you need are already included you can get this Plugin up and running like so: Your HTML Header Include the default stylesheet (located in .
<! Your HTML By default Ketchup checks the data-validate attribute of form fields if it can find matching validations. Your Javascript Just call ketchup() on your form, voilà. $('#default-behavior').ketchup(); Declare fields to validate in the call In last version Ketchup checked the class attribute for validations... which was not everyones taste because class should be used for defining CSS classes. Validate on different events. Examples. Here you will see LiveValidation in action, and the code that makes it all happen, to serve as examples of its capabilities and as tutorials to get you started.
IMPORTANT - As you probably already know, relying on client-side validation alone is a very bad idea. Always perform appropriate server-side validation as well. The purpose of this library, and javascript validation in general, is not to replace server-side validation, but make the act of filling in a form less daunting for a user, and to save them time. Contents Homepage example Top First up, just in case you were wondering, the homepage example consists of 2 validations - Presence to make sure it is filled in, and Format to check that the value entered contains ‘hello’ in any case. Say “hello”: First the field is set up to be a LiveValidation object, by passing in its id as the first argument. Then the Presence validation is added to it, and this example also provides an overridden failureMessage: Presence Top Format Top Basic. jQuery Validity.