Navigieren zu "index.html?" auf Knopf klicken nicht Einstellelemente

Question

im neuen HTML und Javascript. Ich habe Probleme mit meinem Knopf klicken. Wenn der Benutzername/das Passwort leer ist, muss der Rahmen für das Eingabefeld auf rot gesetzt werden, dann lassen Sie mich sie wieder ausfüllen. Problem ist, dass, wenn die Eingabefelder leer sind und wenn ich auf die Schaltfläche klicke, die Eingabefelder für eine halbe Sekunde rot gesetzt werden, dann endet die Webseite bei index.html? nicht sicher, warum ich die Konsole in Google Chrome beobachtet, und es zeigt

login_button Clicked 
index.js:34 username == null 
index.js:41 password == null 
Navigated to file:////index.html? 

Knopf

$('#login_button').click(function() { 
    console.log("login_button Clicked"); 
    var username = $('#login_username').val(); 
    var password = $('#login_password').val(); 

    if (username == "") { 
     console.log("username == null"); 
     $('#login_username').css({ 
      "border": '#FF0000 1px solid' 
     }); 
    } 

    if (password == "") { 
     console.log("password == null"); 
     $('#login_password').css({ 
      "border": '#FF0000 1px solid' 
     }); 
    } 

    if (username && password) { 
     console.log("Login"); 
    } 
}); 

ich dieses in Chrom Klicken Exception : DOMException: Fehler beim Ausführen 'querySelectorAll' auf ' Element ':' * ,: x 'ist kein gültiger Selektor.

Answer 1

$('#login_button').click(function (e) { 
    e.preventDefault(); 

    console.log("login_button Clicked"); 
    var username = $('#login_username').val(); 
    var password = $('#login_password').val(); 

    if (username == "") { 
     console.log("username == null"); 
     $('#login_username').css({ 
      "border": '#FF0000 1px solid' 
     }); 
    } 

    if (password == "") { 
     console.log("password == null"); 
     $('#login_password').css({ 
      "border": '#FF0000 1px solid' 
     }); 
    } 

    if (username && password) { 
     console.log("Login"); 
    } 
}); 

Sie sollten brauchen nur um das Ereignis zu fangen und die Standardaktion

Answer 2

in Ihrer Taste verhindern Sie wahrscheinlich nicht die Art ändern, so wird es standardmäßig das Formular für Sie einreichen. Entweder Sie verhindern das Eintragen von prevent Funktion oder Sie Standardverhalten der Schaltfläche ändern das type-Attribut mit

type = „button“

Answer 3

Sie nicht so sind Event.preventDefault, wenn Sie auf den Link klicken (I Ich vermute den SRC = "#" oder SRC = "/") es geht zum Link-Ort.

Erste 2 Zeilen sollten sein:

$('#login_button').click(function (e) { e.preventDefault();

Answer 4

Entweder return false hinzufügen oder event.preventDefault(); hinzufügen Form zu verhindern vorzulegen, wenn Daten leer oder falsch sind.

Sehen Sie den Unterschied zwischen den beiden: event.preventDefault() vs. return false

if (username == "") { 
     console.log("username == null"); 
     $('#login_username').css({ 
      "border": '#FF0000 1px solid' 
     }); 
     return false; 
}