JQuery - Detener submit

   
Vista:

Detener submit

Publicado por Ricardo Palma (5 intervenciones) el 06/01/2016 07:44:48
Señores, que tal, tengo la siguiente inquietud. Deseo que al momento de existir algún error de validación, el evento clic de un botón submit se detenga y en caso contrario, avance. A continuación, mi código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function() {
	$("form[name=agregar] input[name=servicio]").focus();
	$('#guardar').on('click', function (e) {
		$.ajax({
			type: $("form[name=agregar]").attr("method"),
			url : $("form[name=agregar]").attr("action"),
			data: $("form[name=agregar]").serialize(),
			success: function(data) {
				if (data.success == false) {
					e.preventDefault();
					e.stopPropagation();
					var errores = "";
					$("form[name=agregar] input[name=servicio]").attr('style', 'border: 1px solid #F00;');
					$("form[name=agregar] input[name=servicio]").focus();
					for(datos in data.mensaje){
						errores += data.mensaje[datos] + "\n";
					}
					toastr.error(errores, "Información de Sistema");
					return false;
				}
			},
			error: function(error) {
			}
		});
	});
});

Por más que he buscado y agregado métodos al evento, la página se actualiza de todas formas. ¿Cómo debería hacerlo en este caso?.

Muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Danny

Detener submit

Publicado por Danny (7 intervenciones) el 06/01/2016 22:01:06
Hola amigo, creo que la solucion es muy simple, dado que estas inyectando el evento click al boton, deberias cambiar el tipo del boton de submit a button, eso evitaria que haga el submit, y tu codigo solo lo tendrias que modificar un poco para que haga el submit cuando la validacion este bien

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Detener submit

Publicado por Ricardo Palma (5 intervenciones) el 06/01/2016 22:06:40
Hola, gracias por responder, es una de las alternativas que había barajado, pero me pidieron que fuera submit. De todas formas había intentado antes con el formulario, algo así:

1
2
3
4
$("#id_formulario").submit(function(e) {
    if (1 == 1) return false;
else loqsea;
});

Y así he experimentado de muchas formas y nada, así es que a ver si puedo convencer para cambiar el tipo de botón y sino, a seguir luchando.

Muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Danny

Detener submit

Publicado por Danny (7 intervenciones) el 06/01/2016 22:26:50
Intenta algo como esto, lo he probado y me funciona muy bien

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
	$("#save").click(function(){
		$.post("myAction?accion=find",{id:$("#id").val()},function(data){
			//Tus validaciones
			if(data=="success"){
				$("#myForm").submit()
			}
		})
		return false
	})
})
 
<input type="submit" value="test" id="save" />

Adaptala a tu caso y prueba
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Detener submit

Publicado por Ricardo Palma (5 intervenciones) el 07/01/2016 02:45:07
Hola, gracias nuevamente por tu respuesta. Quizás se me olvidó comentar algo, si se dan cuenta, dentro del jQuery no estoy haciendo ninguna validación, sino que la validación va a un controlador de laravel, entonces si la respuesta desde allá me manda error de validación o de guardado, claro, me manda el mensaje y todo y si todo es correcto guarda la data en base de datos.

Lo anterior quiere decir que si lo realizo de esa forma, al estar bien todo, primero va a guardar por medio del controlador y luego de eso, en vez de retornar a la página donde aparece el listado (típico crud), realizará nuevamente un submit donde ya lógicamente mostrará el mensaje de error traídos por json.

Por eso es que estaba preguntando cómo hacerlo para que en caso de error se detenga en caso de éxito pase de largo.

No se si se entendió claro, sino, me avisan para más detalles.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Detener submit

Publicado por Vainas (96 intervenciones) el 07/01/2016 09:37:48
Buenas de nuevo:

Es decir que llamas dos veces al servidor: una con ajax y la otra de modo normal.

Pues primero que nada el codigo que te pase mas abajo te sigue valiendo. De entrada tendras que cancelar que se envie la pagina si o si. Luego si segun tu codigo confirmas que esta bien o esta mal puedes llamar directamente al boton o al submit:

1
$("#id_formulario").submit();
o
1
$("#save").click();

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Detener submit

Publicado por Ricardo Palma (5 intervenciones) el 07/01/2016 14:39:38
Hola, gracias nuevamente por responder, comento un poco sobre el asunto. Las validaciones se encuentran en un controlador, el flujo sería el siguiente, sí o sí debo llegar al controlador que guarda la data en la base de datos en primer lugar, pues no existe un método de validación separado de esta parte del negocio.

Mediante ajax debo llegar al método del controlador anteriormente señalado, pues me da la respuesta de success o error, si es success, anteriormente ya guardó los datos en la base de datos, entonces que quiere decir esto, que al empezar con las validaciones en jQuery, la respuesta de error o success ya vienen dadas desde el controlador. En caso de ser error, no hay ningún problema, el problema surge cuando es success, pues si recibo eso en la variable data, quiere decir que pasó la validación en el servidor y por ende, ya guardó en la database, por esto es que digo que no puedo ir dos veces al método, pues si voy por segunda vez, ya van los campos en blanco.

Para que se entienda mejor, pondré acá el método al que estoy llamando.

public function store() {
if (Input::get()) {
$inputs = $this->getInputs(Input::all());
if ($this->validateForms($inputs) === TRUE) {
$mensaje = array();
$inputs['detalle_servicio'] = ucwords(trim($inputs['servicio']));
$inputs['session_id'] = $_SESSION['DATA_USER'][0]->ID;
$inputs['updated_at'] = date('Y-m-d H:i:s');
$inputs['created_at'] = date('Y-m-d H:i:s');
$servicio = new Servicio($inputs);
if ($servicio->save()) {//Si esto es true, entonces aquí guarda en la database
$mensaje = "Servicio ingresado correctamente.";
return Response::json(array('success' => TRUE, 'mensaje' => $mensaje));
//return Redirect::to('casinos/servicios')->with(array('mensaje' => $mensaje));
} else {
$mensaje[] = "Error al ingresar el Servicio. Por favor, intente nuevamente.";
return Response::json(array('success' => FALSE, 'mensaje' => $mensaje));
}
} else {
return Response::json(array('success' => FALSE, 'mensaje' => $this->validateForms($inputs)->getMessageBag()->toArray()));
}
} else {
return Redirect::to('casinos/servicios');
}
}

Y bueno, lógicamente el action del formulario está apuntando al método anterior.

Saludos y gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Detener submit

Publicado por Vainas (96 intervenciones) el 06/01/2016 22:36:14
Buenas:

Prueba con:

e.preventDefault(); o return false.

Usa al principio la primera opcion, pero no dentro de la function success.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function() {
	$("form[name=agregar] input[name=servicio]").focus();
	$('#guardar').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
		$.ajax({
			type: $("form[name=agregar]").attr("method"),
			url : $("form[name=agregar]").attr("action"),
			data: $("form[name=agregar]").serialize(),
			success: function(data) {
				if (data.success == false) {
					var errores = "";
					$("form[name=agregar] input[name=servicio]").attr('style', 'border: 1px solid #F00;');
					$("form[name=agregar] input[name=servicio]").focus();
					for(datos in data.mensaje){
						errores += data.mensaje[datos] + "\n";
					}
					toastr.error(errores, "Información de Sistema");
					//return false; esto no deberia ir aqui.
				}
			},
			error: function(error) {
			}
		}); // Esto es el fin del ajax
return false;  //podria ir aqui por ejemplo. pero mejor usa los que trae jQuery
	});
});


Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Detener submit

Publicado por Ricardo Palma (5 intervenciones) el 07/01/2016 02:50:11
Estimado, gracias por responder. En una respuesta que dejé arriba comento el flujo que estoy realizando, entonces si coloco el código que me dices, al estar bien la validación, se quedará en la misma página.

Todas esas cosas créanme que las intenté, no soy de los que lee y no está seguro de cómo aplicarlo, así no se aprende.

Lo que se me ocurre para salir rápido del paso, es que si está todo bien, tirar un redireccionamiento y crear una sesión flash para que en la página de listado aparezca el mensaje de registro correcto.

Lo malo con eso es que tendría que hacerlo personalizado con todas las vistas de create y update en vez de realizar algo genérico.

Saludos y gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar