在设计用户身份验证之前，preventDefault

Question

i have in my index a modal with user sign up form. i create a javascript when the buttom save has click on. when the users have errors the alerts appear in the modal but it redirect other page.

i would the page not redirect when users have errors.

this is the javascript and ajax.

 $("#update").click(function(e){ if(!validarEmail()){ $("#divalerta").addClass("alert-danger"); $("#divalerta").removeClass("alert-success"); var j = $("<p id=\\"alerta\\"><span class=\\"glyphicon glyphicon-exclamation-sign\\"></span>Formato de email incorrecto</p>"); mostrarAlerta(j); e.preventDefault(); return; } if($("#newpass").val() != $("#retypepass").val()){ $("#divalerta").addClass("alert-danger"); $("#divalerta").removeClass("alert-success"); var j = $("<p id=\\"alerta\\"><span class=\\"glyphicon glyphicon-exclamation-sign\\"></span>Las contraseñas no concuerdan</p>"); mostrarAlerta(j); e.preventDefault(); return; } var datos = {}; datos['accion'] = "ingresar"; datos['nombre'] = $("#nombre").val(); datos['apellido'] = $("#apellido").val(); datos['email'] = $("#email").val(); datos['pass'] = $("#newpass").val(); //var params={'datos' : datos}; $.ajax({ method: "POST", async: false, data: datos, url: "/", success: function(response){ var arr = response.split("-"); if(arr[0]=="ok"){ $("#divalerta").removeClass("alert-danger"); $("#divalerta").addClass("alert-success"); $("#update").prop('disabled',true); } else{ $("#divalerta").addClass("alert-danger"); $("#divalerta").removeClass("alert-success"); } var j = $("<p id=\\"alerta\\"><span class=\\"glyphicon glyphicon-exclamation-sign\\"></span>"+arr[1]+".</p>"); mostrarAlerta(j); } }); }); 

Answer 1

You could do something like this

 <form onsubmit="return validator()" var validator = function(){ if(!validarEmail()){ $("#divalerta").addClass("alert-danger"); $("#divalerta").removeClass("alert-success"); var j = $("<p id=\\"alerta\\"><span class=\\"glyphicon glyphicon-exclamation-sign\\"></span>Formato de email incorrecto</p>"); mostrarAlerta(j); return false; } if($("#newpass").val() != $("#retypepass").val()){ $("#divalerta").addClass("alert-danger"); $("#divalerta").removeClass("alert-success"); var j = $("<p id=\\"alerta\\"><span class=\\"glyphicon glyphicon-exclamation-sign\\"></span>Las contraseñas no concuerdan</p>"); mostrarAlerta(j); return false; } var datos = {}; datos['accion'] = "ingresar"; datos['nombre'] = $("#nombre").val(); datos['apellido'] = $("#apellido").val(); datos['email'] = $("#email").val(); datos['pass'] = $("#newpass").val(); //var params={'datos' : datos}; $.ajax({ method: "POST", async: false, data: datos, url: "/", success: function(response){ var arr = response.split("-"); if(arr[0]=="ok"){ $("#divalerta").removeClass("alert-danger"); $("#divalerta").addClass("alert-success"); $("#update").prop('disabled',true); } else{ $("#divalerta").addClass("alert-danger"); $("#divalerta").removeClass("alert-success"); } var j = $("<p id=\\"alerta\\"><span class=\\"glyphicon glyphicon-exclamation-sign\\"></span>"+arr[1]+".</p>"); mostrarAlerta(j); } }); return false; }); 

That way, the form will never reload. You can modify this how you so choose, but just know that having an onsubmit attribute return false will not allow the form to reload. I hope this helps.

Answer 2

用return false代替return，它将成功。