Tarea #1097 -> Mejorar la presentación de los mensajes que se generan con los formularios

git-svn-id: https://192.168.0.254/svn/Proyectos.Incam_PROFIND_Aterrizaje/trunk@14 db07b8d6-80f3-1c4e-84de-227a4fed3af2

src/css/media.css

@@ -194,7 +194,6 @@
     }
     .row-fluid {
         width: 100%;
-        *zoom: 1;
     }
     .row-fluid:before,
     .row-fluid:after {
@@ -210,7 +209,6 @@
         width: 100%;
         min-height: 28px;
         margin-left: 2.127659574%;
-        *margin-left: 2.0744680846382977%;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -ms-box-sizing: border-box;
@@ -221,51 +219,39 @@
     }
     .row-fluid .span12 {
         width: 99.99999998999999%;
-        *width: 99.94680850063828%;
     }
     .row-fluid .span11 {
         width: 91.489361693%;
-        *width: 91.4361702036383%;
     }
     .row-fluid .span10 {
         width: 82.97872339599999%;
-        *width: 82.92553190663828%;
     }
     .row-fluid .span9 {
         width: 74.468085099%;
-        *width: 74.4148936096383%;
     }
     .row-fluid .span8 {
         width: 65.95744680199999%;
-        *width: 65.90425531263828%;
     }
     .row-fluid .span7 {
         width: 57.446808505%;
-        *width: 57.3936170156383%;
     }
     .row-fluid .span6 {
         width: 48.93617020799999%;
-        *width: 48.88297871863829%;
     }
     .row-fluid .span5 {
         width: 40.425531911%;
-        *width: 40.3723404216383%;
     }
     .row-fluid .span4 {
         width: 31.914893614%;
-        *width: 31.8617021246383%;
     }
     .row-fluid .span3 {
         width: 23.404255317%;
-        *width: 23.3510638276383%;
     }
     .row-fluid .span2 {
         width: 14.89361702%;
-        *width: 14.8404255306383%;
     }
     .row-fluid .span1 {
         width: 6.382978723%;
-        *width: 6.329787233638298%;
     }
     input,
     textarea,
@@ -341,4 +327,17 @@
     .row-fluid .thumbnails {
         margin-left: 0;
     }
+    
+    .form-horizontal .control-label {
+        width: 150px;
+    }
+
+    .form-horizontal .controls {
+        margin-left: 170px;
+    }
+    
+    .form-horizontal .controls label {
+        width: 210px;
+    }
+    
 }

src/css/style.css

@@ -16,9 +16,11 @@ img, embed, object, video {
     max-width: 100%;
     height: auto;
 }
+
 form {
     margin: 18px 0 0 0;
 }
+
 ul, ol {
     padding-bottom: 10px;
     margin-bottom: 9px;
@@ -94,25 +96,84 @@ p {
     font-size: 11px;
 }
 
+
+/*----------------------------------------*/
+
+.form-horizontal .help-inline.error {
+    font-size: 90%;
+}
+
+.form-horizontal .control-label {
+    padding-top: 8px;
+}
+
+.form-horizontal .control-group {
+    margin-bottom: 5px;
+}
+
+.form-horizontal .controls {
+    min-height: 50px;
+    height: 50px;
+}
+
+.form-horizontal label.error {
+    color: #B94A48;
+}
+
+.form-horizontal .controls label small {
+    font-size: 90%;
+}
+
+.form-box {
+    border: 1px solid #ddd;
+    background: #f4f4f4;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f4f4');
+    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f4f4f4));
+    background: -moz-linear-gradient(top, #ffffff, #f4f4f4);
+    background:  -o-linear-gradient(top, #ffffff, #f4f4f4);    
+    position: relative;
+}
+
+.form-box h4 {
+    width: auto;
+    padding: 20px;
+    margin-top: 0;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: 20px;
+    font-weight: normal;
+    color: #fff;
+}
+
+.form-box form {
+    min-height: 330px;
+}
+
+.form-box .form-actions {
+    background: #f6f6f6; /* for non-css3 browsers */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6'); /* for IE */
+    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f6f6)); /* for webkit browsers */
+    background: -moz-linear-gradient(top, #ffffff, #f6f6f6); /* for firefox 3.6+ */
+    background:  -o-linear-gradient(top, #ffffff, #f6f6f6);
+    border-top: 1px solid #e4e4e4;
+    margin-bottom: 0;
+    margin-top: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.form-box.productos li {
+    font-size: 16px;
+    line-height: 1.5em;
+}
+
 /*----------------------------------------*/
 .link-arrow {
     background: url(../img/arrow.png) no-repeat 0 3px;
     padding-left: 15px;
     font-size: 13px;
 }
-.btn-grey, .btn-green, .btn-cyan, .btn-brown {
-    padding: 10px 15px;
-    font-family: "Droid Sans",Arial,Helvetica,Geneva,sans-serif;
-    font-size: 14px;
-    color: #fff;
-    font-weight: 700;
-    line-height: 14px;
-    border: none;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    display: inline-block;
-}
 .btn-big {
     border-radius: 5px 5px 5px 5px;
     font-size: 18px;
@@ -122,70 +183,23 @@ p {
 [class^="icon-"], [class*=" icon-"] {
     vertical-align: middle;
 }
-
+.btn.disabled.btn-striped, .btn[disabled].btn-striped,  
-.btn-grey {
+.btn-striped {
-    background: #838485; /* for non-css3 browsers */
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9fa0a1', endColorstr='#838485'); /* for IE */
+  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background: -webkit-gradient(linear, left top, left bottom, from(#9fa0a1), to(#838485)); /* for webkit browsers */
+  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background: -moz-linear-gradient(top, #9fa0a1, #838485); /* for firefox 3.6+ */
+  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background:  -o-linear-gradient(top, #9fa0a1, #838485);
+  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
+  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-.btn-grey:hover {
+  -webkit-background-size: 40px 40px;
-    background: #9fa0a1; /* for non-css3 browsers */
+  -moz-background-size: 40px 40px;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838485', endColorstr='#9fa0a1'); /* for IE */
+  -o-background-size: 40px 40px;
-    background: -webkit-gradient(linear, left top, left bottom, from(#838485), to(#9fa0a1)); /* for webkit browsers */
+  background-size: 40px 40px;
-    background: -moz-linear-gradient(top, #838485, #9fa0a1); /* for firefox 3.6+ */
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
-    background:  -o-linear-gradient(top, #838485, #9fa0a1);
+  -moz-animation: progress-bar-stripes 2s linear infinite;
-    color: #fff;
+  animation: progress-bar-stripes 2s linear infinite;  
 }
 
-.btn-green {
-    background: #62853e; /* for non-css3 browsers */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79a14d', endColorstr='#62853e'); /* for IE */
-    background: -webkit-gradient(linear, left top, left bottom, from(#79a14d), to(#62853e)); /* for webkit browsers */
-    background: -moz-linear-gradient(top, #79a14d, #62853e); /* for firefox 3.6+ */
-    background:  -o-linear-gradient(top, #79a14d, #62853e);
-}
-.btn-green:hover {
-    background: #79a14d; /* for non-css3 browsers */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62853e', endColorstr='#79a14d'); /* for IE */
-    background: -webkit-gradient(linear, left top, left bottom, from(#62853e), to(#79a14d)); /* for webkit browsers */
-    background: -moz-linear-gradient(top, #62853e, #79a14d); /* for firefox 3.6+ */
-    background:  -o-linear-gradient(top, #62853e, #79a14d);
-    color: #fff;
-}
-
-.btn-cyan {
-    background: #3e7b85; /* for non-css3 browsers */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d96a1', endColorstr='#3e7b85'); /* for IE */
-    background: -webkit-gradient(linear, left top, left bottom, from(#4d96a1), to(#3e7b85)); /* for webkit browsers */
-    background: -moz-linear-gradient(top, #4d96a1, #3e7b85); /* for firefox 3.6+ */
-    background:  -o-linear-gradient(top, #4d96a1, #3e7b85);
-}
-.btn-cyan:hover {
-    background: #4d96a1; /* for non-css3 browsers */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e7b85', endColorstr='#4d96a1'); /* for IE */
-    background: -webkit-gradient(linear, left top, left bottom, from(#3e7b85), to(#4d96a1)); /* for webkit browsers */
-    background: -moz-linear-gradient(top, #3e7b85, #4d96a1); /* for firefox 3.6+ */
-    background:  -o-linear-gradient(top, #3e7b85, #4d96a1);
-    color: #fff;
-}
-
-.btn-brown {
-    background: #85613e; /* for non-css3 browsers */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1774d', endColorstr='#85613e'); /* for IE */
-    background: -webkit-gradient(linear, left top, left bottom, from(#a1774d), to(#85613e)); /* for webkit browsers */
-    background: -moz-linear-gradient(top, #a1774d, #85613e); /* for firefox 3.6+ */
-    background:  -o-linear-gradient(top, #a1774d, #85613e);
-}
-.btn-brown:hover {
-    background: #a1774d; /* for non-css3 browsers */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#85613e', endColorstr='#a1774d'); /* for IE */
-    background: -webkit-gradient(linear, left top, left bottom, from(#85613e), to(#a1774d)); /* for webkit browsers */
-    background: -moz-linear-gradient(top, #85613e, #a1774d); /* for firefox 3.6+ */
-    background:  -o-linear-gradient(top, #85613e, #a1774d);
-    color: #fff;
-}
 
 /*----------------------------------------*/
 .checkmark li {
@@ -368,50 +382,6 @@ p {
     float: left;
 }
 
-.form-box {
-    border: 1px solid #ddd;
-    background: #f4f4f4;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f4f4');
-    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f4f4f4));
-    background: -moz-linear-gradient(top, #ffffff, #f4f4f4);
-    background:  -o-linear-gradient(top, #ffffff, #f4f4f4);    
-    position: relative;
-}
-
-.form-box h4 {
-    width: auto;
-    padding: 20px;
-    margin-top: 0;
-    font-family: Arial,Helvetica,sans-serif;
-    font-size: 20px;
-    font-weight: normal;
-    color: #fff;
-}
-
-.form-box form {
-    min-height: 280px;
-}
-
-.form-box .form-actions {
-    background: #f6f6f6; /* for non-css3 browsers */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6'); /* for IE */
-    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f6f6)); /* for webkit browsers */
-    background: -moz-linear-gradient(top, #ffffff, #f6f6f6); /* for firefox 3.6+ */
-    background:  -o-linear-gradient(top, #ffffff, #f6f6f6);
-    border-top: 1px solid #e4e4e4;
-    margin-bottom: 0;
-    margin-top: 0;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.form-box.productos li {
-    font-size: 16px;
-    line-height: 1.5em;
-}
-
 /*----------------------------------------*/
 .pricing {
     border: 1px solid #e4e4e4;
@@ -668,9 +638,11 @@ span.valid {
     font-size: 14px;
     padding-bottom: 10px;
 }
-#footer .nav-tabs > li > a:hover, #footer .nav-tabs > .active > a {
+#footer .nav-tabs > li > a:hover, .nav-tabs > .active > a {
     border: 0;
-    color: #fff !important;
 }
 
-
+/*----------------------------------------*/
+.modal-backdrop {
+    background-color: #fff;
+}

src/index.html

@@ -11,7 +11,7 @@
         <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
         <link rel="stylesheet" media="screen" href="css/bootstrap.min.css"/>
         <link rel="stylesheet" media="screen" href="css/style.css"/>
-        <script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
+
     </head>
     <body>
 
@@ -67,6 +67,9 @@
                                         <p>Olvidé mi password: <a href="">Solicitar</a></p>
                                     </div>
                                 </div>
+                                <div class="control-group pagination-centered resultado">
+                                </div>
+
                                 <div class="form-actions">
                                     <button title="Entrar a mi cuenta" class="btn btn-primary btn-large" type="submit">Entrar</button>
                                 </div>
@@ -100,10 +103,13 @@
                                 <div class="control-group">
                                     <div class="controls">
                                         <label for="FormularioRegistro_acepto" class="checkbox">
-                                            <input type="checkbox" id="FormularioRegistro_acepto" name="FormularioRegistro_acepto" value="0"> Acepto los <a target="_blank" href="terminos-uso.html">Términos legales de uso</a> y la <a target="_blank" href="politica-privacidad.html">política de privacidad</a>.
+                                            <input type="checkbox" id="FormularioRegistro_acepto" name="FormularioRegistro_acepto" value="0"><small>Acepto los <a target="_blank" href="terminos-uso.html">Términos legales de uso</a> y la <a target="_blank" href="politica-privacidad.html">política de privacidad</a>.</small>
                                         </label>                                                                                               
                                     </div>
                                 </div>
+                                <div class="control-group pagination-centered resultado">
+                                </div>
+
                                 <div class="form-actions">
                                     <button title="Crear mi cuenta" class="btn btn-success btn-large" type="submit">Pulsa aquí</button>
                                 </div>
@@ -112,14 +118,8 @@
                     </div>                    
                 </div>
             </div>
-            <div class="row">
-                <div class="span12" id="resultado"></>
-                </div>
-            </div>
         </div>
 
-
-
         <div class="container clearfix">            
             <div class="row pagination-centered">
                 <div class="divider"></div>
@@ -140,7 +140,7 @@
                 </div>
                 <div class="span4">
                     <div class="icon-bg red-bg"><img width="60" height="60" alt="icon" src="img/icons/icon-big-4.png"></div>
-                    <p><strong>Visite Clubjobtic</strong><br>La página de los Agentes de empleo <a href="www.clubjobtic.com/frasier" title="Clubjobtic">www.clubjobtic.com/frasier</a></p>
+                    <p><strong>Visite Clubjobtic</strong><br>La página de los Agentes de empleo <a title="Clubjobtic" href="www.clubjobtic.com/frasier">www.clubjobtic.com/frasier</a></p>
                 </div>
             </div>            
         </div>
@@ -183,147 +183,23 @@
             </div>
         </footer>
 
-        <script src="js/bootstrap.min.js" type="text/javascript"></script> 
+        <div class="modal hide fade">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h3></h3>
+            </div>
+            <div class="modal-body">
+                <p></p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
+            </div>
+        </div>
+
+
+        <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
         <script src="js/jquery.validate.min.js" type="text/javascript"></script> 
-
+        <script src="js/bootstrap.min.js" type="text/javascript"></script> 
-        <script type="text/javascript">
+        <script src="js/profind.js" type="text/javascript"></script> 
-            $(document).ready(function(){
-                var enviar_login = function() {
-                    var $form = $("#entrarForm");
-                    $.ajax({
-                        url: $form.attr('action'),
-                        dataType: 'json',
-                        type: 'POST',
-                        data : $form.serialize()+'&ajax=login-form',
-                        success: function(data, textStatus, XMLHttpRequest) {
-                            if (data.status == '200') {
-                                window.location.href = data.redirect;
-                            }
-                            else {
-                                if (data != null && typeof data == 'object') {
-                                    $('#resultado').val('');
-                                    $.each(data, function(key, value){
-                                        $('#resultado').append(key + ' => ' + value);
-                                    }); 
-                                }
-                            }
-                        },
-                        error: function(XMLHttpRequest, textStatus, errorThrown) {
-                            $('#resultado').append('Error de comunicación con el servidor');
-                        }
-                    });
-                    return false;							
-                };
-                
-                $("#entrarForm").validate({
-                    onfocusout: false,
-                    onkeyup: false,
-                    onclick: false,
-                    rules:{
-                        FormularioLogin_email:{
-                            required:true,
-                            email: true
-                        },
-                        FormularioLogin_password:{
-                            required:true
-                        }
-                    },
-                    messages:{
-                        FormularioLogin_email:{
-                            required:"Introduzca su e-mail",
-                            email:"Indique un e-mail válido"
-                        },
-                        FormularioLogin_password:{
-                            required:"Indique su contraseña",
-                        }
-                    },
-                    errorClass: "help-inline",
-                    errorElement: "span",
-                    highlight:function(element, errorClass, validClass) {
-                        $(element).parents('.control-group').addClass('error');
-                    },
-                    unhighlight: function(element, errorClass, validClass) {
-                        $(element).parents('.control-group').removeClass('error');
-                    },
-                    submitHandler: enviar_login
-                });				
-
-                var enviar_registro = function() {
-                    var $form = $("#registroForm");
-                    $.ajax({
-                        url: $form.attr('action'),
-                        dataType: 'json',
-                        type: 'POST',
-                        data : $form.serialize()+'&ajax=registro-form',
-                        success: function(data, textStatus, XMLHttpRequest) {
-                            if (data.status == '200') {
-                                $('#resultado').append(data.texto);
-                            }
-                            else {
-                                if (data != null && typeof data == 'object') {
-                                    $('#resultado').val('');
-                                    $.each(data, function(key, value){
-                                        $('#resultado').append(key + ' => ' + value);
-                                    }); 
-                                }
-                            }
-                        },
-                        error: function(XMLHttpRequest, textStatus, errorThrown) {
-                            $('#resultado').append('Error de comunicación con el servidor');
-                        }
-                    });
-                    return false;							
-                };
-                
-                $("#registroForm").validate({
-                    onfocusout: false,
-                    onkeyup: false,
-                    onclick: false,
-                    rules:{
-                        FormularioRegistro_email:{
-                            required:true,
-                            email: true
-                        },
-                        FormularioRegistro_password:{
-                            required:true,
-                            minlength: 6
-                        },
-                        FormularioRegistro_password2:{
-                            required:true,
-                            minlength: 6,
-                            equalTo: "#FormularioRegistro_password"
-                        },
-                        FormularioRegistro_acepto:{
-                            required:true
-                        }
-                    },
-                    messages:{
-                        FormularioRegistro_email:{
-                            required:"Introduzca su e-mail",
-                            email:"Indique un e-mail válido"
-                        },
-                        FormularioRegistro_password:{
-                            required:"Indique una nueva contraseña",
-                            minlength:"La contraseña debe tener un mínimo de 6 caracteres"
-                        },
-                        FormularioRegistro_password2:{
-                            required:"Introduzca otra vez la contraseña",
-                            minlength:"La contraseña debe tener un mínimo de 6 caracteres",
-                            equalTo:"La confirmación de contraseña no coincide con la contraseña"
-                        },
-                        FormularioRegistro_acepto:""
-                    },
-                    errorClass: "help-inline",
-                    errorElement: "span",
-                    highlight:function(element, errorClass, validClass) {
-                        $(element).parents('.control-group').addClass('error');
-                    },
-                    unhighlight: function(element, errorClass, validClass) {
-                        $(element).parents('.control-group').removeClass('error');
-                    },
-                    submitHandler: enviar_registro
-                });
-            });
-        </script>        
     </body>
 </html>

src/js/profind.js

@@ -0,0 +1,175 @@
+$(document).ready(function(){
+    var enviar_login = function() {
+        var form = $("#entrarForm");
+        form.find(":submit").attr("disabled", true);        
+        form.find(":submit").addClass('btn-striped');
+        $('#entrarForm .resultado').children().remove();
+        $.ajax({
+            url: form.attr('action'),
+            dataType: 'json',
+            type: 'POST',
+            data : form.serialize()+'&ajax=login-form',
+            success: function(data, textStatus, XMLHttpRequest) {
+                form.find(":submit").removeClass('btn-striped');
+                form.find(":submit").attr("disabled", false);
+                if (data.status == '200') {
+                    window.location.href = data.redirect;
+                }
+                else {
+                    if (data != null && typeof data == 'object') {
+                        $.each(data, function(key, value){
+                            jQuery('<label/>', {
+                                text: value
+                            }).addClass('error').appendTo('#entrarForm .resultado');
+                        }); 
+                    }
+                }
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
+                form.find(":submit").removeClass('btn-striped');
+                form.find(":submit").attr("disabled", false);
+                jQuery('<label/>', {
+                    text: 'Error de comunicación con el servidor'
+                }).addClass('error').appendTo('#entrarForm .resultado');
+            }
+        });
+        return false;							
+    };
+                
+    $("#entrarForm").validate({
+        onfocusout: false,
+        onkeyup: false,
+        onclick: false,
+        rules:{
+            FormularioLogin_email:{
+                required:true,
+                email: true
+            },
+            FormularioLogin_password:{
+                required:true
+            }
+        },
+        messages:{
+            FormularioLogin_email:{
+                required:"Introduzca su e-mail",
+                email:"Indique un e-mail válido"
+            },
+            FormularioLogin_password:{
+                required:"Indique su contraseña",
+            }
+        },
+        errorClass: "error help-inline",
+        errorElement: "span",
+        highlight:function(element, errorClass, validClass) {
+            $(element).parents('.control-group').addClass('error');
+        },
+        unhighlight: function(element, errorClass, validClass) {
+            $(element).parents('.control-group').removeClass('error');
+        },
+        submitHandler: enviar_login
+    });				
+
+    var enviar_registro = function() {
+        var form = $("#registroForm");
+        form.find(":submit").attr("disabled", true);
+        form.find(":submit").addClass('btn-striped');
+        $('#registroForm .resultado').children().remove();
+        $.ajax({
+            url: form.attr('action'),
+            dataType: 'json',
+            type: 'POST',
+            data : form.serialize()+'&ajax=registro-form',
+            success: function(data, textStatus, XMLHttpRequest) {
+                form.find(":submit").removeClass('btn-striped');
+                form.find(":submit").attr("disabled", false);
+                if (data.status == '200') {
+                    form.clearForm();
+                    $('.modal .modal-header h3').text(data.titulo);
+                    $('.modal .modal-body p').text(data.texto);
+                    $('.modal').modal('show');
+                }
+                else {
+                    if (data != null && typeof data == 'object') {
+                        $.each(data, function(key, value){
+                            jQuery('<label/>', {
+                                text: value
+                            }).addClass('error').appendTo('#registroForm .resultado');
+                        }); 
+                    }
+                }
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
+                form.find(":submit").removeClass('btn-striped');
+                form.find(":submit").attr("disabled", false);
+                jQuery('<label/>', {
+                    text: 'Error de comunicación con el servidor'
+                }).addClass('error').appendTo('#registroForm .resultado');
+            }
+        });
+        return false;							
+    };
+                
+    $("#registroForm").validate({
+        onfocusout: false,
+        onkeyup: false,
+        onclick: false,
+        rules:{
+            FormularioRegistro_email:{
+                required:true,
+                email: true
+            },
+            FormularioRegistro_password:{
+                required:true,
+                minlength: 6
+            },
+            FormularioRegistro_password2:{
+                required:true,
+                minlength: 6,
+                equalTo: "#FormularioRegistro_password"
+            },
+            FormularioRegistro_acepto:{
+                required:true
+            }
+        },
+        messages:{
+            FormularioRegistro_email:{
+                required:"Introduzca su e-mail",
+                email:"Indique un e-mail válido"
+            },
+            FormularioRegistro_password:{
+                required:"Indique una nueva contraseña",
+                minlength:"La contraseña debe al menos 6 caracteres"
+            },
+            FormularioRegistro_password2:{
+                required:"Introduzca otra vez la contraseña",
+                minlength:"La contraseña debe al menos 6 caracteres",
+                equalTo:"La confirmación de contraseña no coincide"
+            },
+            FormularioRegistro_acepto:""
+        },
+        errorClass: "error help-inline",
+        errorElement: "span",
+        highlight:function(element, errorClass, validClass) {
+            $(element).parents('.control-group').addClass('error');
+        },
+        unhighlight: function(element, errorClass, validClass) {
+            $(element).parents('.control-group').removeClass('error');
+        },
+        submitHandler: enviar_registro
+    });
+});
+
+$.fn.clearForm = function() {
+    return this.each(function() {
+        var type = this.type, tag = this.tagName.toLowerCase();
+        if (tag == 'form')
+            return $(':input',this).clearForm();
+        if (type == 'text' || type == 'password' || tag == 'textarea')
+            this.value = '';
+        else if (type == 'checkbox' || type == 'radio')
+            this.checked = false;
+        else if (tag == 'select')
+            this.selectedIndex = -1;
+    });
+};
+