JavaScript代碼不能正常工作（無法讀取輸入）

Question

我寫了下面這段代碼來閱讀用戶是否輸入了登錄名和密碼字段。但是，它不起作用。有人能幫我嗎？

function validateForm() 
 
{ 
 
    var x = document.getElementById("login").innerHTML; 
 
    var i; 
 
    for(i=0;i<x.length;i++) 
 
    { 
 
    if(x.elements[i].value==""|| x.elements[i].value=null) 
 
    { 
 
     alert("Fill in all fields."); 
 
     return false; 
 
    } 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="login"> \t 
 
    <form role="form" onsubmit="return validateForm()"> 
 
    <div class="col-sm-offset-8"> 
 
     <label class="control-label col-sm-8" >Login ID:</label> 
 
     <div class="form-group col-sm-8"> 
 
     <input type="text" class="form-control" id="text" placeholder="Enter login ID"> 
 
     </div> 
 

 
     <label class="control-label col-sm-8" >Password:</label> 
 
     <div class="form-group col-sm-8">   
 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
     </div> 
 

 
     <div class="col-sm-8"> 
 
     <button type="submit" class="btn btn-info">Submit</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 1

您需要更改

<input type="text" class="form-control" id="text" placeholder="Enter login ID"> 

要

<input type="text" class="form-control" id="login" placeholder="Enter login ID"> 

的原因是因爲你的代碼

document.getElementById("login").value; 

正在查找ID 登錄的文檔元素，但在您的標記中元素的ID爲文本，因此您的代碼沒有找到它。

[編輯] 至於其他的已經指出的那樣，你使用.innerHTML - 這個返回元素的子節點的HTML被選中。改爲使用.value，並檢查它是否不是空字符串，如果它是空的，則驗證失敗。

Answer 2

您需要對代碼進行一些更改。

1. 使用他們每個人的document.querySelectorAll("#login input");
2. 檢查由x[i]（""或null）獲取的所有字段。

順便說一句，你可以做for(var i=0;i<x.length;i++)那麼你不應該在之前定義i變量。

function validateForm() 
 
{ 
 
    var x = document.querySelectorAll("#login input"); 
 
    var i; 
 

 
    for(i=0;i<x.length;i++) 
 
    { 
 
    if(x[i].value== "" || x[i].value == null) 
 
    { 
 
     alert("Fill in all fields."); 
 
     return false; 
 
    } 
 
    } 
 
    alert('sent'); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="login"> \t 
 
    <form role="form" onsubmit="return validateForm();"> 
 
    <div class="col-sm-offset-8"> 
 
     <label class="control-label col-sm-8" >Login ID:</label> 
 
     <div class="form-group col-sm-8"> 
 
     <input type="text" class="form-control" id="text" placeholder="Enter login ID"> 
 
     </div> 
 

 
     <label class="control-label col-sm-8" >Password:</label> 
 
     <div class="form-group col-sm-8">   
 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
     </div> 
 

 
     <div class="col-sm-8"> 
 
     <button type="submit" class="btn btn-info">Submit</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 3

獲取相應的輸入字段的值，並檢查長度。

更多細節

Answer 4

見this code好了，你沒有得到的登錄表單。在你的代碼中，不是通過獲取登錄表單並迭代其元素，而是通過ID獲取未定義的元素。如果您索引.innerHTML，您將在瀏覽器控制檯中看到一個錯誤，因爲該元素不存在。無論如何，你不想獲取元素的內部HTML，因爲它是一個包含元素內部HTML文本的字符串。如果你的元素是有效的，那麼循環會迭代內部的每個字符。此外，它不存在字符串中的屬性elements。您試圖通過循環塊中的字符串獲取表單元素。這裏去一個基本的例子來解決這些錯誤：

以下ID添加到您的窗體：

<form id="login" role="form" onsubmit="return validateForm()"> 

，並做一些改變的JavaScript代碼，如：

function validateForm() { 

    // Get all the text boxes in the form 
    var fields = document.getElementById("login").querySelectorAll("input[type=text]"); 

    // Iterate over the fields 
    for(var i = 0, f; f = fields[i]; i++) { 

     // Check if the value length is smaller than 1 
     if(f.value.length < 1) { // Empty 

      alert("Fill in all fields."); 

     } 
    } 

} 

Answer 5

你應該使用事件監聽器&我會將錯誤消息放在表單域<span id="id-error" class="hidden">Error message</span> <span id="pwd-error" class="hidden">Error message</span>中，當他們開始與輸入交互但未滿足條件時，移除隱藏的類。

function validateForm() { 

    function addEvent(obj, type, fn) { 
     if (obj.attachEvent) { 
     obj['e'+type+fn] = fn; 
     obj[type+fn] = function(){obj['e'+type+fn](window.event);} 
     obj.attachEvent('on'+type, obj[type+fn]); 
     } else 
     obj.addEventListener(type, fn, false); 
    } 

    function validateUserId() { 
    if (your validation goes here){ 
    id-error.classList.remove("hidden"); 
     return false; 
    }else{ 
     id-error.classList.add("hidden"); 
     return true; 
    } 
    } 

    function validatePWD() { 
    if (your validation goes here){ 
    pwd-error.classList.remove("hidden"); 
     return false; 
    }else{ 
     pwd-error.classList.add("hidden"); 
     return true; 
    } 
    } 

    //variables for input fields & event listeners 
    var formUserId = document.getElementById("text"); 
    var formUserPWD = document.getElementById("pwd"); 


    //add event handlers 
    addEvent(formUserId, 'change', function(event) { 
     validateUserId(); 
    }); 

    addEvent(formUserId, 'focus', function(event) { 
     validateUserId(); 
    }); 

    addEvent(formUserId, 'keydown', function(event) { 
     validateUserId(); 
    }); 

    addEvent(formUserId, 'keyup', function(event) { 
     validateUserId(); 
    }); 

    addEvent(formUserPWD, 'change', function(event) { 
     validatePWD(); 
    }); 

    addEvent(formUserPWD, 'focus', function(event) { 
     validatePWD(); 
    }); 

    addEvent(formUserPWD, 'keydown', function(event) { 
     validatePWD(); 
    }); 

    addEvent(formUserPWD, 'keyup', function(event) { 
     validatePWD(); 
    }); 
}