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&eacute;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.

Puedes ver el ejemplo en funcionamiento

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!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 3,50 de 5)
Cargando…
Comparte en las redes sociales

Una respuesta a “Validar formulario con Mootools”

  1. Muriel Mottillo dice:

    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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.