jquery validation - with form tag

Question

All these input tags are inside <form></form> tags

<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">

The script below doesn't work. Can sombody help me?

$("#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"});
  }
});

Answer 1

You are not using a prevention. And the form in turn is being submitted thus showing nothing as the response.

Try adding this to the top:

event.preventDefault();

By this, you will prevent the submission and the change will be seen.

You can add them in the fields where you want the form to not be submitted as:

$("#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"
     });
   }
});

Using this you will prevent the submission of the wrong information to the server. And otherwise the form will be submitted. And if you want to see the change only, then just add it to the top of the code. There it will take the control and will show the change in the border.

Answer 2

You need to prevent browser default action, use preventDefault() for that

$("#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"});
    }

});