javascript - validación de jquery - con la etiqueta form

Todas estas etiquetas de entrada están dentro de las etiquetas <form></form>

<input  type="text" placeholder="username"><br />
<input  type="text" placeholder="Name"><br />
<input  type="text" placeholder="Lastname"><br />
<input id="mail" type="text" placeholder="E-mail"><br />
<input id="mail_1" type="text" placeholder="Re enter E-mail"><br />
<input id="password" type="password" placeholder="password"><br />
<input id="password_1"  type="password" placeholder="Re enter password"><br /> 
<input id="submit" type="submit" value="registration">

El script de abajo no funciona. ¿Alguien puede ayudarme?

$("#submit").click(function(){
  var email = $("#mail").val();
  var email_1 = $("#mail_1").val();
  var password = $("#password").val();
  var password_1 = $("#password_1").val();
  if (email != email_1){
    $("#mail,#mail_1").css({"border":"1px solid red","background-color":"#FF9999"});
    alert("wrong mail");
  }
  else{
    $("#mail,#mail_1").css({"border":"1px solid green","background-color":"#C2FFC2"});
  }
  if (password != password_1){
    $("#password,#password_1").css({"border":"1px solid red","background-color":"#FF9999"});
    alert("wrong password");
  }
  else{
    $("#password,#password_1").css({"border":"1px solid green","background-color":"#C2FFC2"});
  }
});

Respuesta #1

No estás usando una prevención. Y el formulario a su vez se está enviando, mostrando así nada como respuesta.

Intenta añadir esto al principio:

event.preventDefault();

Con esto, evitarás la presentación y el cambio será visible.

Puede agregarlos en los campos donde no desea que se envíe el formulario como:

$("#submit").click(function(){
   var email = $("#mail").val();
   var email_1 = $("#mail_1").val();
   var password = $("#password").val();
   var password_1 = $("#password_1").val();
   if (email != email_1){
     $("#mail, #mail_1").css({
       "border":"1px solid red","background-color":"#FF9999"
     });
     alert("wrong mail");
     event.preventDefault(); /* note here */
   }
   else{
     $("#mail, #mail_1").css({
       "border":"1px solid green","background-color":"#C2FFC2"
     });
   }
   if (password != password_1){
     $("#password,#password_1").css({
       "border":"1px solid red","background-color":"#FF9999"
     });
     alert("wrong password");
     event.preventDefault(); /* note here */
   }
   else{
     $("#password, #password_1").css({
      "border":"1px solid green","background-color":"#C2FFC2"
     });
   }
});

Usando esto evitarás el envío de información incorrecta al servidor. Y de lo contrario, el formulario será enviado. Y si solo quieres ver el cambio, entonces solo agrégalo al principio del código. Ahí tomará el control y mostrará el cambio en el borde.

Respuesta #2

Necesitas prevenir la acción predeterminada del navegador, usa preventDefault() para eso

$("#submit").click(function(e){
    e.preventDefault();
    var email = $("#mail").val();
    var email_1 = $("#mail_1").val();
    var password = $("#password").val();
    var password_1 = $("#password_1").val();
    if (email != email_1){
      $("#mail,#mail_1").css({"border":"1px solid red","background-color":"#FF9999"});
      alert("wrong mail");
    }
    else{
      $("#mail,#mail_1").css({"border":"1px solid green","background-color":"#C2FFC2"});
    }
    if (password != password_1){
      $("#password,#password_1").css({"border":"1px solid red","background-color":"#FF9999"});
      alert("wrong password");
    }
    else{
      $("#password,#password_1").css({"border":"1px solid green","background-color":"#C2FFC2"});
    }

});