Pues mira sere muy turro porque puedo validar con prototype y enviar datos con jquery, por separado , no puedo hacer que funcionen juntos y no he logrado validar con el plugin de jquery, ni tampoco enviar la info con prototype.
por aquí ando en mi codigo:
Código HTML:
<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enviar formulario sin recargar</title>
<script language="javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script language="javascript" src="jquery.maskedinput-1.2.1.pack.js"></script>
<script language="javascript" src="jquery.validate.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #fo3').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
<script id="demo" type="text/javascript">
$(document).ready(function() {
formValidator.init({
form: "#vote_form",
var validator = $("#vote_form").validate({
rules: {
nombre: "required",
lastname: "required",
email: {
required: true,
email: true,
},
edad: "required",
sexo: "required"
pais: "required"
},
messages: {
nombre: {
required: "Debes poner tu nombre y apellido",
minlength: jQuery.format("Enter at least {3} characters"),
remote: jQuery.format("{0} is already in use")
},
email: {
required: "Debes poner un E-mail válido",
minlength: "Debes poner un E-mail válido",
remote: jQuery.format("{0} is already in use")
},
edad: {
required: "Debes llenar este campo",
},
sexo: {
required: "Debes llenar este campo",
},
pais: {
required: "Debes llenar este campo",
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
</script>
</script>
<link rel="stylesheet" type="text/css" href="css/rating.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/milk.css" />
<link rel="stylesheet" type="text/css" href="css/chili.css" />
<style type="text/css">
<!--
body,td,th {
color: #333333;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
fieldset {
width:380px;
margin:auto;
}
#result {
width:280px;
padding:10px;
border:1px solid #bfcddb;
margin:auto;
margin-top:10px;
text-align:center;
}
-->
</style></head>
<body>
<div id="contact_form">
<form method="post" action="conexion.php" id="vote_form" name="vote_form" >
<fieldset>
<legend>Votame!</legend>
<div class="field-label">
<label for="nombre"><span class="asterisco">(*)</span>Nombre y apellido</label>
:</div>
<input name="nombre" id="nombre" class="required validate-alpha" title="Debes poner tu nombre." />
<div class="field-label">
<label for="mail"><span class="asterisco">(*)</span>E-mail</label>
:</div>
<div class="field-widget"><input name="mail" id="mail" class="required validate-email" title="Debes poner tu E-mail." /></div>
<div class="field-label">
<label for="edad"><span class="asterisco">(*)</span>Edad</label>
:</div>
<div class="field-label">
<input name="edad" id="edad" class="required validate-number" title="Debes poner tu edad, solo números." />
</div>
<br />
<div class="field-label">
<label for="sexo"><span class="asterisco">(*)</span>Sexo</label>
:</div>
<select id="sexo" name="sexo" class="validate-selection" title="Debes poner una opción.">
<option value="-1" selected="selected">--Seleccione--</option>
<option value="1">Masculino</option>
<option value="2">Femenino</option>
</select>
<br />
<div class="field-label">
<label for="pais"><span class="asterisco">(*)</span>País</label>
:</div>
<select id="pais" name="pais" class="validate-selection" title="No has elegido país">
<option value="-1" selected="selected">--Seleccione--</option>
<option value="1">Masculino</option>
<option value="2">Femenino</option>
</select>
</fieldset><div align="center">
<input type="submit" name="mysubmit" value="Enviar" />
<input type="button" value="Borrar" onclick="valid2.reset(); return false" />
</form></div>
<div id="result"></div>
</body>
</html> 
