Desarrollo de sitios web

carlosbweb · #1 (**permalink**) 22/09/2012, 12:29

bUEN dia mi primer aporte y va para quienes dominen AJAX jquery
tiene algun que otro problemita me viene bien una ayuda y para contribuir con el foro y el aprendizaje de la gente

Código HTML:

Ver original[U]INDEX.HTML[/U]
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <meta property="og:title" content="::Fixture Futbol::"/>
        <meta property="og:type" content="website"/>
        <meta property="og:image" content="img/screenshot.jpg"/>
        <meta property="og:site_name" content="Fixture Futbol"/>
        <meta property="fb:app_id" content="331488756873740"/>
        <title>:::Fixture Futbol:::</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/modernizr.js"></script>
        <script type="text/javascript" src="js/validaform0.js"></script>
        <script type="text/javascript" src="js/messages_es.js" charset="iso-8859-1"></script>
        <script type="text/javascript" src="js/alertas.js"></script>
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="css/estilo.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="css/alertas.css" media="screen"/>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <body>
        <div id="login">
            <div id="box-login">
                <form id="formulario" name="formulario" action="Php/login.php" method="post">   
                    <pre>Nombre</pre><p><input type="text" name="nombre" id="nombre"  class="required name" placeholder="admin"/><span id="checkname" /></p>
                    <br/><br/>
                    <pre>Clave</pre><p><input type="password" name="clave" id="clave"  class="required pass" placeholder="admin"/><span id="checkpass" /></p>
                    <br/><br/>
                    <input type="submit" id="enviar" class="enviar" value="ENTRAR"/>
                    <input type="hidden" name="submitted" value="TRUE"/>
                </form>
            </div>
        </div>
    </body>
</html>

Código Javascript:

Ver original[U]VALIDAFORM0[/U]
 
$(document).ready(function()
{
    $("#formulario").validate();
    $("#enviar").click(function(e)
    {
        /* e.preventDefault();  crea un bug formularios sin plugins hoy en dia son un asco y vienen con errores*/
        if($("#formulario").valid()==false)
        {
           $("#formulario").validate().numberOfInvalids();
        }
        else
        {
 
        var datos = 'nombre='+ nombre + '&clave=' + clave;
            $.ajax({
                type: "POST",              
                url: "../Php/login.php",
                dataType: 'json',
                data: datos,
                success: function() {
                      $('#checkname').text('Nombre valido!').addClass('msg_ok').animate({ 
                      'right' : '130px',
                      'background-color': '#16EA07',
                      'border-radius': '4px 4px 4px 4px',
                      'display': 'inline',
                      'width': '140px',
                      }, 5000);
                      $('#checkpass').text('Clave valida!').addClass('pass_ok').animate({ 
                      'right' : '130px',
                      'background-color': '#16EA07',
                      'border-radius': '4px 4px 4px 4px',
                      'display': 'inline',
                      'width': '140px',
                      }, 5000);
                },
                error: function() {
                      $('#checkname').text('Nombre incorrecto!').addClass('msg_error').animate({ 
                      'right' : '130px',
                      'background-color': '#FF0000',
                      'border-radius': '4px 4px 4px 4px',
                      'display': 'inline',
                      'width': '140px',
                      }, 5000);
                      $('#checkpass').text('Clave incorrecta!').addClass('pass_error').animate({ 
                      'right' : '130px',
                      'background-color': '#FF0000',
                      'border-radius': '4px 4px 4px 4px',
                      'display': 'inline',
                      'width': '140px',
                      }, 5000);
                }
               });
             return false;
        }
    });   
});

Código PHP:

Ver original[U]LOGIN.PHP[/U]
 
<?php
// Incluir conexion a bd
include('lib.php');
// Fin conexion a bd
 
// Paso 1: Recibimos el formulario:
$db=connect('localhost','root','','futbol');
 
$usuario= mysqli_real_escape_string($db, trim($_POST['nombre'])); 
$clave= mysqli_real_escape_string($db, trim($_POST['clave']));
 
// Paso 2: Validacion minima
if (isset($_POST['submitted'])){
    if(isset($usuario) && !empty($usuario) && isset($clave) && !empty($clave))  {
    
    // Paso 3: Conectamos a la db
    $connect=connect('localhost','root','','futbol');
    
    // Verifica la conexion
    if (mysqli_connect_errno()) {
    printf("Conexion fallida: %s\n", mysqli_connect_error());
    exit();
    }
    
    // Paso 4: Hacemos la consulta a la Tabla por el usuario y la clave
    $sql="SELECT NOMBRE FROM cuentas WHERE NOMBRE='$usuario' AND PW='$clave'";
    
    // Paso 5: vemos si hubo coincidencias en cada caso
    $result=@mysqli_query($connect,$sql);
    $row_cnt = $result->num_rows;
    if($row_cnt>0) {
    Si la cuenta existe
    echo($datos);
    sleep(5);
    header("Location: ../index2.html");
    }else{
    Si la cuenta no existe
    sleep(5);
    echo($datos);
    }
}
}
?>

Código Javascript:

Ver original[U]MESSAGES_ES.JS[/U]
 
/*
     * Translated default messages for the jQuery validation plugin.
     * Locale: ES
     */
     jQuery.extend(jQuery.validator.messages, {
      required: "Este campo es obligatorio.",
      remote: "Por favor, rellena este campo.",
      email: "Por favor, escribe una direccion de correo valida",
      url: "Por favor, escribe una URL valida.",
      date: "Por favor, escribe una fecha valida.",
      dateISO: "Por favor, escribe una fecha (ISO) valida.",
      number: "Por favor, escribe un numero entero valido.",
      digits: "Por favor, escribe solo digitos.",
      creditcard: "Por favor, escribe un numero de tarjeta valido.",
      equalTo: "Por favor, escribe el mismo valor de nuevo.",
      accept: "Por favor, escribe un valor con una extension aceptada.",
      maxlength: jQuery.validator.format("Por favor, no escribas mas de {0} caracteres."),
      minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
      rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
      range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
      max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
      min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
    });
    jQuery.validator.addMethod("name", function(value, element, params) {
        return this.optional(element) || /^[a-z\_]{5}$/i.test(value);
        }, jQuery.format("Por favor, solo caracteres validos"));
        
    jQuery.validator.addMethod("pass", function(value, element, params) {
        return this.optional(element) || /^[a-z\_]{5}$/i.test(value);
        }, jQuery.format("Por favor, solo caracteres validos"));

carlosbweb · #2 (**permalink**) 22/09/2012, 21:26

Escriban gente no sean tímidos asi intercambiamos dudas !!
Y este foro se hace mas llevadero ;)