Validar formulario con Mootools
En este artículo vamos a validar en el lado del cliente los campos de un formulario utilizando la librería de Mootools.
Para conseguir validar los campos de un formulario con Mootools, deberemos incluir su librería en el <head> de nuestra página:
<script type='text/javascript' src='js/mootools-core-1.4-full.js'></script>
<script type='text/javascript' src='js/mootools-more-1.4-full.js'></script>
<script type="text/javascript">
window.addEvent('domready', function(){
// The elements used.
var myForm = document.id('myForm'),
myResult = document.id('myResult');
// Labels over the inputs.
myForm.getElements('[type=text], textarea').each(function(el){
new OverText(el);
});
// Validation.
new Form.Validator.Inline(myForm);
// Ajax (integrates with the validator).
new Form.Request(myForm, myResult, {
requestOptions: {
'spinnerTarget': myForm
},
extraData: { // This is just to make this example work.
'html': 'Form sent.'
}
});
});
</script>
Seguramente el script que te descargues de Mootools tendrá los textos de validación en inglés. Si buscas en google, rápidamente encontrarás una traducción para estos textos.
En el <body> tendremos un formulario parecido al siguiente:
<form id="myForm" action="request.php" method="post"> <fieldset> <legend>Contact form example</legend> <div> <p>Nombre:<input type="text" name="name" class="required" /></p> <p>Email: <input type="text" name="email" class="required validate-email" /></p> <p>Teléfono: <input type="text" name="phone" /></p> <p>Website: <input type="text" name="url" /></p> <p>Mensaje: <textarea id="myMessage" name="message" rows="5" cols="30" class="required"></textarea></p> </div> <div><input type="submit" value="Send" /></div> </fieldset> <div id="myResult"></div> </form>
Como podemos observar, en el formulario podemos indicar de forma fácil que campos van a ser los requeridos y al enviarse el formulario se ejecuta la acción que habrá en el archivo «request.php» que servirá para procesar los datos.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
I love your writing style really loving this website. «Whatever you can do, or dream you can, begin it. Boldness has genius, power and magic in it.» by Johann Wolfgang von Goethe.