Error para enviar form ajax

[kaman10]

buenas, estoy haciendo una validacion con jquery y quiero enviar el formulario con la funcion ajax de jquery, pero me da este error.
La idea es validar el form si da true envio con ajax sin recargar la pagina, mostrando los datos enviados
a la bd.

Error: searchshield[aEng[i] + "SearchEngine"] is undefined
Archivo de origen: chrome://searchshield/content/overlay.js
Línea: 1561

La validacion funciona y el envio con ajax no, pero cambio el evento ready y no anda la validacion pero el envio de form si.

Alguien sabe de este problema, soy nuevo en este tema y probe muchas formas pero no lo saco por eso recurro a ustedes.

Gracias de antemano. :)

[maycolalvarez]

¿y como quieres que te ayuden si no muestras parte del código????

[kaman10]

codigo js

Código Javascript:

$(document).ready(function(){
 
function validar(){
...
// Validacion correcta ahora envio form
    $('#formusuario').submit(function() {
    // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) { 
                $('#resultado').html(data);
            }
        })        
        return false;
    }); 
    });
}
 

No se si el envio tengo que ponerlo en otra funcion para cuando se valida correctamente envie el form y muestre resultados sin recargar.
Saludos

[kaman10]

Alguien me puede dar una mano con este problema?

[thehack]

Código Javascript:

var nacimiento ={
nuevo: function(){
$.ajax({
            type: 'POST',
            url: 'ARCHIVO PHP O DIRECCION URL',
            data: 'DATOS A ENVIAR POR POST',
success: function(h){
                switch(h.charAt(0)){
                    case '0': //Error
                my_popup.procesando_fin();
                    alert('Error', h.substring(3));;
 
                        break;
                    case '1': //OK
                            
                        $('#main').addClass('error').html(h.substring(3)).slideDown();
                        $('.loader').show();
                        break;
                }
                //
            
 
            }
         });
}
 
}
 

formulario

<div id="main">

<div class="field clearfix">

<label for="municipo">MUNICIPIO</label>
<input type="text" class="text ui-corner-all form-input-text box-shadow-soft" style="max-width:360px;" id="g_municipio" name="g_municipio" maxlength="35">
</div>

<div class="buttons">

<input type="button" class="ui-button-positive ui-state-default ui-corner-all box-shadow-soft ui-button ui-widget ui-button-text" id="new" value="Guardar cambios" onclick="nacimiento.nuevo('true')"/>
</div>

</div>

asi envio yo el formulario con js es un ejemplo

[neglivv]

prueba con esto: http://www.forosdelweb.com/f127/solucion-formulario-con-jquery-ajax-php-930858/

[al3j4ndro]

kaman10 pone el formulario, le estas errando con los ID del formulario, usa firebug, pone el formulario

[kaman10]

formusuario es el identificador del formulario, el resultado es el id de un div donde muestro lo procesado por php.

[kaman10]

Iniciado por neglivv

prueba con esto: http://www.forosdelweb.com/f127/solu...ax-php-930858/

este script funciona, pero en mi problema no anda.

[kaman10]

si alguien sabe a que se debe el error que me muestra la consola.

Error: searchshield[aEng[i] + "SearchEngine"] is undefined
Archivo de origen: chrome://searchshield/content/overlay.js
Línea: 1561

Porque causas se produce este error?
A ver si por ahi encuentro la respuesta, gracias.

[alexg88]

Te han dicho en alguna respuesta anterior que pusieses el formulario. Ponlo

Pon también la parte de validación en javascript.

[kaman10]

Formulario limpio

Código HTML:

<form name="formularioUsuario" onSubmit="return validarFormulario()" 
id="formusuario" action="procesar.php" method="POST">
	 
	<table>
	<thead></thead>
					 <tbody>				    
						<tr>
	<td>Nombre</td>
	<td>
	<input type="text" name="nombre" id="nombre" value="" />
							 </td>
                             <td>    
	<span id="errorNombre" style="display:none;" >
         Campo requerido
    </span>
                        </td>
				        </tr>	
						<tr>
	<td>Apellido</td>
	<td>
	<input type="text" name="apellido" id="apellido" value="" />
							 </td>
							 <td>
    <span id="errorApellido" style="display:none;" >
         Campo requerido
    </span>
                             </td>
				        </tr>	
						<tr>
	<td>e-Mail</td>
	<td>
	<input type="text" name="email" id="email" value="" />
							 </td>
							 <td>
    <span id="errorEmail" style="display:none;" >
         Campo requerido y debe estar correctamente escrito
    </span>
                             </td>
				        </tr>	
						<tr>
						     <td colspan="2">
    <input type="submit" name="guardar" value="Guardar" />			     						    
						         
	<input type="button" name="cancelar" value="Cancelar" 
	onclick="document.location.href = document.referrer" />
							 </td>
				        </tr>						
					 </tbody>	
			     </table>
				 <div id="resultado"></div> 

Validacion del formulario y envio

Código:

$('#formusuario').ready(function(){  

function validarFormulario(){
    var valido= true;
	
	// Valido el nombre
	if ($('#nombre').val()==0){
         valido= false;
	     jQuery("#errorNombre").show().css({'color':'red'}); 
	}else{ 
         jQuery("#errorNombre").hide(300); 
	}
	
	// Valido el apellido
	if ($('input#apellido').val()==0){
	     valido= false;
	     $("span#errorApellido").show().css({'color':'red'}); 
	}else{
	     $("span#errorApellido").hide(300);
	}
	
	// Valido el email
	if ($('input#email').val()==""){ 
	     valido= false; 
	     $("#errorEmail").show().css({'color':'red'});
	}else{
 var expreg = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,3}/ 
    if (!expreg.test($('#email').val())) { 
	      valido= false;
	     $("#errorEmail").show().css({'color':'red'}); 
	}else{
	     $("#errorEmail").hide(300);
	}}
		
	// El formulario fue validado y se envia
	return valido;

    $('#formusuario').submit(function() {
    // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
    // Mostramos un mensaje con la respuesta de PHP
            success: function(data) { 
                $('#resultado').html(data);
            }
        })        
        return false;
    });	
	});	
	}

[neglivv]

mmm... no sé si es algo tarde para contestar. Y tampoco se si esto pueda solucionar tu problema (espero que si )
Intenta cambiando los <span></span> donde muestras los errores por unos <div>
por ejemplo:

Código HTML:

div.errores
{
	color: #7f1418;
    font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
    text-decoration:none;
	font-weight:normal;
}
... 
<div class="errorNombre errores" style="display:none;">Ingrese un nombre v&aacute;lido</div> 

y en la validación del formulario:
$(".errorNombre").show();

[kaman10]

neglivv nunca es tarde para dar una mano, igual te agradezco, ya lo voy solucionando, lo que hice fue poner la parte de envio con ajax del formulario despues del div "resultados", fue asi que entonces pude lograr que me valide el form y luego lo envie.

La validacion esta en el encabezado, no es de lo mejor pero funciona, igual espero alguna otra solucion.

saludos

[alexg88]

Además de ciertos errores como no cerrar bien las llaves, la función validarFormulario tiene que estar fuera del $(document).ready o te dirá que no está declarada.

Pon el código tal cual te lo pongo dentro del <head>.

Código Javascript:

function validarFormulario(){
    var valido= true;
    
    // Valido el nombre
    if ($('#nombre').val()==0){
         valido= false;
         jQuery("#errorNombre").show().css({'color':'red'}); 
    }else{ 
         jQuery("#errorNombre").hide(300); 
    }
    
    // Valido el apellido
    if ($('input#apellido').val()==0){
         valido= false;
         $("span#errorApellido").show().css({'color':'red'}); 
    }else{
         $("span#errorApellido").hide(300);
    }
    
    // Valido el email
    if ($('input#email').val()==""){ 
         valido= false; 
         $("#errorEmail").show().css({'color':'red'});
    }else{
 var expreg = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,3}/ 
    if (!expreg.test($('#email').val())) { 
          valido= false;
         $("#errorEmail").show().css({'color':'red'}); 
    }else{
         $("#errorEmail").hide(300);
    }
    }
    return valido;
    }
 
$('#formusuario').ready(function(){  
    
 
    $('#formusuario').submit(function() {
    // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
    // Mostramos un mensaje con la respuesta de PHP
            success: function(data) { 
                $('#resultado').html(data);
            }
        })        
        return false;
    });    
    
    });
 

Así debería funcionarte sin ningún problema.

Aun así, se puede hacer de otro manera, a mi parecer mejor (no mezclas el html y el javascript).

Código Javascript:

function validarFormulario(){
    var valido= true;
    
    // Valido el nombre
    if ($('#nombre').val()==0){
         valido= false;
         jQuery("#errorNombre").show().css({'color':'red'}); 
    }else{ 
         jQuery("#errorNombre").hide(300); 
    }
    
    // Valido el apellido
    if ($('input#apellido').val()==0){
         valido= false;
         $("span#errorApellido").show().css({'color':'red'}); 
    }else{
         $("span#errorApellido").hide(300);
    }
    
    // Valido el email
    if ($('input#email').val()==""){ 
         valido= false; 
         $("#errorEmail").show().css({'color':'red'});
    }else{
 var expreg = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,3}/ 
    if (!expreg.test($('#email').val())) { 
          valido= false;
         $("#errorEmail").show().css({'color':'red'}); 
    }else{
         $("#errorEmail").hide(300);
    }
    }
    return valido;
    }
 
$('#formusuario').ready(function(){  
    
 
    $('#formusuario').submit(function() {
        
        if (validarFormulario()){
            
    // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
    // Mostramos un mensaje con la respuesta de PHP
            success: function(data) { 
                $('#resultado').html(data);
            }
        })      
        }  
        return false;
    });    
    
    });
 

Y le quitas el onSubmit en el formulario:

Código HTML:

<form name="formularioUsuario"
id="formusuario" action="procesar.php" method="POST">
     
    <table>
    <thead></thead>
                     <tbody>                    
                        <tr>
    <td>Nombre</td>
    <td>
    <input type="text" name="nombre" id="nombre" value="" />
                             </td>
                             <td>    
    <span id="errorNombre" style="display:none;" >
         Campo requerido
    </span>
                        </td>
                        </tr>    
                        <tr>
    <td>Apellido</td>
    <td>
    <input type="text" name="apellido" id="apellido" value="" />
                             </td>
                             <td>
    <span id="errorApellido" style="display:none;" >
         Campo requerido
    </span>
                             </td>
                        </tr>    
                        <tr>
    <td>e-Mail</td>
    <td>
    <input type="text" name="email" id="email" value="" />
                             </td>
                             <td>
    <span id="errorEmail" style="display:none;" >
         Campo requerido y debe estar correctamente escrito
    </span>
                             </td>
                        </tr>    
                        <tr>
                             <td colspan="2">
    <input type="submit" name="guardar" value="Guardar" />                                             
                                 
    <input type="button" name="cancelar" value="Cancelar" 
    onclick="document.location.href = document.referrer" />
                             </td>
                        </tr>                        
                     </tbody>    
                 </table>
                 <div id="resultado"></div>
 

Saludos