「index.html？」に移動します。ボタンをクリックしないでください。

Question

im new to html and javascript。 ボタンのクリックに問題があるようです。 ユーザ名/パスワードが空の場合は、入力ボックスの境界を赤に設定してから、もう一度入力してください。 問題は、入力ボックスが空で、ボタンをクリックしたときに入力ボックスが赤く設定されてから半分の時間が経過した後、Webページがindex.htmlに終わるということですか？必ずなぜグーグルクロームでコンソールを見ていたし、それが

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

ボタンを示していない私は、クロム 例外 でこれを取得

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

をクリックしてください： のDOMException：実行に失敗しました「querySelectorAll」 'に要素 '：' *、：x 'は有効なセレクタではありません。

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

あなただけのイベントをキャッチし、それはあなたのためのフォームを提出され、デフォルトではので、あなたはおそらく、種類を変更しないでください、あなたのボタンでデフォルトのアクション

Answer 2

を防ぐために必要がある必要があります。 あなたは、私は（あなたがリンクをクリックしたときにあなたがそのようにevent.preventDefaultされていない

Answer 3

type属性

タイプ=「ボタン」を使用してのpreventDefault関数を使用して送信するか、ボタンのデフォルトの動作を変更するのを防ぐのどちらかSRC = "＃"またはSRC = "/"を推測している）、それはリンクの場所に行きます。どちらの

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

Answer 4

return falseを追加したり、データが空であるか間違っている時に提出するフォームを防ぐためにevent.preventDefault();を追加します。

まず2行がなければなりません。

は、両者の差を参照してください：event.preventDefault() vs. return false

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