Javascriptのフォーム検証イベント

Question

）

は、私は、文字列の長さが

<form id="contact"> 
     <input id="name" name="name" type="text" class="feedback-input" placeholder="Name"/> <span id="spanName"> </span> 
     <input name="email" type="text" class="feedback-input" placeholder="Email" /> 
     <textarea name="text" class="feedback-input" placeholder="Message..."></textarea> 
     <input type="submit" value="SUBMIT"/> 
    </form> 





    window.onload = function() { 
     var name = document.getElementById("name"); 
     var nameVal = name.value; 
     var spanName = document.getElementById("spanName"); 
     spanName.innerHTML = "&#10007;"; 

     name.addEventListener('keydown', function() { 
     validate(); 
     }); 

     function validate() { 
     console.log(name); 
     console.log(nameVal); 
     if (nameVal.length > 0) { 
      spanName.innerHTML = "&#10004;"; 
     } else if (nameVal.length > 8) { 
      spanName.innerHTML = "name is to long"; 
     } else { 
      spanName.innerHTML = "yolo"; 
     } 
     console.log(nameVal); 
     } 
    } 

Answer 1

文字の一定量である変数のスコープが重要な場合に更新するスパンをしたいと思います。

window.onloadの内部には、に値を割り当てるために、1回だけnameを使用します。

validateの中には、a global variable already provided by the browserというnameが使用されています（他の機能に対してローカルであると宣言した変数ではありません）。これは文字列なので、長さは変わりません。

// Create an IIFE to create a new (non-global) scope for all your variables. 
 
(function() { 
 

 
    // Declare your variables at a level all the functions can reach them 
 
    var spanName, name; 
 

 
    // Get the DOM elements when the load event fires 
 
    function getDomElements() { 
 
    name = document.getElementById("contact").elements.name; 
 
    spanName = document.getElementById("spanName"); 
 

 
    name.addEventListener("keyup", validate); 
 
    } 
 

 
    window.addEventListener("load", getDomElements); 
 

 
    // Define your validation function 
 
    // Check the VALUE of the form control, not the form control itself 
 
    function validate() { 
 
    // Make sure you exclude values you want a later condition to match 
 
    if (name.value.length > 0 & name.value.length <= 8) { 
 
     spanName.innerHTML = "&#10004;"; 
 
    } else if (name.value.length > 8) { 
 
     spanName.innerHTML = "name is to long"; 
 
    } else { 
 
     spanName.innerHTML = "yolo"; 
 
    } 
 
    } 
 
})();

<form id="contact"> 
 
    <input id="name" name="name" type="text" class="feedback-input" placeholder="Name" /> <span id="spanName"> </span> 
 
    <input name="email" type="text" class="feedback-input" placeholder="Email" /> 
 
    <textarea name="text" class="feedback-input" placeholder="Message..."></textarea> 
 
    <input type="submit" value="SUBMIT" /> 
 
</form>

Answer 2

申し訳ありませんが、これが答えです：

var contact, spanName; 
window.onload = function() { 
    spanName = document.getElementById("spanName"); 
    contact = document.getElementById("name"); 
    contact.onkeyup = validate; 
} 
function validate() { 
    var name = contact.value; 
    var length = name.length; 
    if (length > 0 && length <=8) { 
     spanName.innerHTML = "&#10004;"; 
    } else if (length > 8) { 
     spanName.innerHTML = "name is to long"; 
    } else { 
     spanName.innerHTML = "yolo"; 
    } 
} 

それはあなたに動作しますか？