Foros del Web - Ver Mensaje Individual

martuanez · #7 (**permalink**) 03/02/2009, 20:32

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 &nbsp; as text for IE
			label.html("&nbsp;").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&uacute;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&oacute;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&iacute;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>