Jquery Validierung - mit Formular-Tag

Question

Alle diese Eingangs-Tags sind innerhalb <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"> 

Das Skript unten funktioniert nicht. Kann mir jemand helfen?

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

Sie sind eine Prävention nicht verwenden. Und die Form wiederum wird eingereicht und zeigt somit nichts als Antwort.

Versuchen Sie, diese nach oben und fügte hinzu:

event.preventDefault(); 

Damit werden Sie die Vorlage verhindern und die Änderung zu sehen sein wird.

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

das Sie die Vorlage der falschen Informationen an den Server verhindern Verwendung:

Sie können sie in den Bereichen hinzufügen, in dem Sie das Formular will nicht als eingereicht werden. Und ansonsten wird das Formular eingereicht. Und wenn Sie nur die Änderung sehen möchten, fügen Sie sie einfach an den Anfang des Codes. Dort übernimmt es die Kontrolle und zeigt die Veränderung der Grenze an.

Answer 2

Fehlende wichtige name Attribut in den Formularelementen.

return false Verwendung Formularübermittlung zu stoppen, wenn der Eingang

nicht korrekt ist

$("#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" 
     }); 
     return false; //use to stop form submission 
     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"); 
     return false; //use to stop form submission 
    } else { 
     $("#password,#password_1").css({ 
      "border": "1px solid green", 
       "background-color": "#C2FFC2" 
     }); 
    } 
}); 

Answer 3

Sie müssen Browser Standardaktion zu vermeiden, verwenden preventDefault() für das

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

});