Registro usuarios jquery

Formulario de registro usuarios jquery, php, mysql.

Ejemplo de registro usuarios jquery, en el que solo vamos a guardar en una Base de Datos: nombre del usuario y su contraseña.

Primeramente incluimos las librerias y los estilos css en la cabecera de nuestra página de registro html entre las etiquetas <head></head>.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.min.js"></script>

Dentro de estas etiquetas<head></head> también inclumos la url del archivo.js del script que contiene el código jQuery y Ajax que se encargará de validar los campos del formulario y conectar con la página php.

<script type="text/javascript">

$(document).ready(function() {

	$('.error').hide();

	$("#enviar-btn").click(function() {

		//Obtenemos el valor del campo nombre
		var name = $("input#name").val();

		//Validamos el campo nombre, simplemente miramos que no esté vacío
		if (name == "") {
			$("label#name_error").show();
			$("input#name").focus();
			return false;
		}

		//Obtenemos el valor del campo password
		var password = $("input#password").val();

		//Validamos el campo password, simplemente miramos que no esté vacío
		if (password == "") {
			$("label#pass_error").show();
			$("input#password").focus();
			return false;
		}

		//Construimos la variable que guardará el data Ajax y pasa al archivo php para procesar los datos
		var dataString = 'name=' + name + '&password=' + password;

		$.ajax({
			type: "POST",
			url: "register.php",
			data: dataString,
			success: function() {
		    	$('#register_form').html("<div id='message'></div>");
		        $('#message').html("<h2>Tus datos han sido guardados correctamente!</h2>")
		        .hide()
		        .fadeIn(1500, function() {
					$('#message').append("<a href='index.php?action=see'>Ver usuarios registrados</a>");
		        });
		    }
		});
		return false;
	});
});

runOnLoad(function(){
	$("input#name").select().focus();
});
</script>

Al hacer click en el botón con id=”enviar-btn” se procesa el código anterior que se encaraga de validar el nombre de usuario y contraseña mirando que no estén vacíos y luego envía esos datos al archivo “register.php” mediante la técnica Ajax.

El archivo PHP se encarga de coger el nombre de usuario y contraseña introducidos y guardarlos en la base de datos de la siguiente forma:

<?php
$name = utf8_decode($_POST['name']);
$password = md5($_POST['password']);

//Conexión con la Base de Datos:
$con = mysql_connect('localhost', 'usuario', 'password');
mysql_select_db("tu_base_de_datos", $con);

$insert = "INSERT INTO tu_tabla (name, password, date_add) VALUES ('$name', '$password', now())";
mysql_query($insert);
?>

Como vemos el archivo PHP recoge los datos del formulario mediante POST, conecta a la base de datos e inserta los valores en un nuevo registro.

Para el campo nombre utilizamos la función utf8_decode() para asegurarnos de que los acentos y carácteres especiales se guardarán de forma correcta en la base de datos.

Y el campo password lo guardamos encriptado con la función md5() de PHP por cuestiones de seguridad.

Ahora solo falta que en el <body> pongamos el siguiente formulario:

<div id="register_form">
	<form name="register" method="post" action="">
		<label for="nombre">Nombre:</label>
		<input type="text" id="name" name="name" />
		<label class="error" for="name" id="name_error">Debe introducir su nombre.</label><br><br>
		<label for="password">Password:</label>
		<input type="password" id="password" name="password" />
		<label class="error" for="pass" id="pass_error">Debe introducir su contrase&ntilde;a.</label><br><br>

		<input name="submit" type="submit" value="enviar" id="enviar-btn" />
	</form>
</div>

Espero que haya servido de ayuda. Un saludo