JavaScriptを：ここで入力

Question

の値を確認してくださいは、私のコードについていくつかの情報がある：

HTML：

<input autocomplete="off" class="red" id="name" name="name" onclick="checkName(this);" onkeyup="checkName(this);" onblur="checkName(this);" placeholder="Name*"> 
<button type="submit" onClick="validateName();">SUBMIT YER WORK!</button> 

CSS：

input.red:focus { 
    background: #E45F56 !important; 
    border: 1px solid #E45F56 !important; 
} 
input.false { 
    background: #E45F56 !important; 
    border: 1px solid #E45F56 !important; 
} 
input.true { 
    background: #4aaaa5 !important; 
    border: 1px solid #4aaaa5 !important; 
} 

JAVASCRIPT：

var status = 0; 
var name = document.getElementById("name").value; 

function checkName(name) { 
    if (!name) { 
     status = 0; 
     name.classList.remove("red"); 
     name.classList.remove("true"); 
     name.classList.add("false"); 
    } else if (name) { 
     status = 1; 
     name.classList.remove("red"); 
     name.classList.remove("false"); 
     name.classList.add("true"); 
    } 
} 

function validateName() { 
    if (status == 0) { 
     window.location = "#fail"; 
     name.focus(); 
    } else if (status == 1) { 
     window.location = "#submitted"; 
    } 
} 

全体アイデアは、あなたがt帽子の入力フィールドでは、直接フィードバックを得るでしょう、フィールドは赤または緑のいずれかになります。ボタンをクリックすると、ポップアップが開きます。

このコードの唯一の問題は、入力フィールドをクリックするたびに緑色で赤色に変わらないことです。これは、私がまだ入力していないのに、そのボタンをクリックすると "#submitted" -popupがポップアップすることを意味します。

Answer 1

nameはオブジェクトへの参照なので、!nameは常にfalseになります。あなたが先頭と末尾の空白を無視したい場合は、おそらく...

if (!name.value) { 

または多分

if (!name.value.trim()) { 

を望んでいました。

Answer 2

私はjqueryを使いたいです。簡単な構文です。 あなたもブラーを使用することができます。

var name = $("#name").val(); 
name.blur(checkname); 

は、その後、あなたは関数を使用する：

function checkname(name){ 

    if(name.length < 4){ //if you type less than 4 chars 
     name.css('border-color','#red'); 
     return false; 
    } 
    else if(name == ""){ //if the input is empty 
     name.css('border-color','#red'); 
     return false; 
    }else{ 
     name.css('border-color','#green'); 
     return true; //validate the fields 
    } 

} 

私はそれが役に立てば幸い！