簡單的表單驗證幫助「無法讀取未定義的」

新手的屬性'元素'，即時試圖找出爲什麼我得到「無法讀取未定義的屬性'元素'。簡單的表單驗證幫助「無法讀取未定義的」

的javascript：

function conf() 
{ 
    for (i=0; i<5; i++) 
    { 
     box = document.project.elements[i]; 
     if (!box.value) 
     { 
      alert('You haven\'t filled in ' + box.name + '!'); 
      return false 
     } 
    } 
    return true; 
}

HTML：

<form id="project" onsubmit="return conf()" action="#"> 
    <fieldset> 
     <legend>Contact Details</legend> 
     <label for="txtname">Your Name:</label> <input type="text" class="text" name="txtname" id="1" /><br/> 
     <label for="txtemail">Email:</label> <input type="text" class="text" name="txtemail" id="2"/><br/> 
     <label for="txtartist">Artist:</label> <input type="text" class="text" name="txtartist" id="3"/><br/> 
     <label for="txtalbum">Song/Album:</label> <input type="text" class="text" name="txtalbum" id="4"/><br/> 
     <label for="txtcomments">Comments:</label> <textarea class="ta" name="txtcomments" id="txtcomments" cols="30" rows="20"></textarea><br/> 
     <input type="submit" class="buttons" id="btnSubmit" name="btnsubmit" value="Send Enquiry"/> 
    </fieldset> 
</form>

來源

2014-06-08 user3720610

對不起，第7行： box = document.project.elements [i]; – user3720610

爲了得到你需要使用表單ID的表單元素，

document.getElementById('project').elements[i];

一個更好的辦法是使用document.querySelectorAll()並獲取您感興趣的元素，這將在這種情況下，

document.querySelectorAll('#project input[type="text"], textarea')

它給你一個元素數組，你可以循環並執行檢查。

順便說一句，您可能遲早會開始需要對每個輸入進行單獨檢查。一種方法是使用新的HTML5 input types。

來源

2014-06-08 22:04:05

謝謝你，做了這個工作：D 這是微不相關的，但是，我注意到它選擇fieldset作爲元素，我需要它來選擇輸入。無論如何要做到這一點，而不刪除fieldset？ – user3720610

只能選擇'input type =「text」'元素和'textarea'你可以使用'document.querySelectorAll（'＃project input [type =「text」]，textarea'）'並循環。 –

：o !!!!!!謝謝你親切的陌生人！ – user3720610

您嘗試過的方法應該可行，因爲具有ID的表單被命名爲文檔對象的屬性。也許你有另一個名稱或ID爲項目的元素。

如果形式是一個名稱或項目的ID的唯一元素，你寫，正式：

document.forms.project.elements...

或更短：

document.project.elements...

但可避免這個問題。既然你的表單上的提交監聽器，你可以直接通過傳遞傳遞給窗體的引用此：

<form id="project" onsubmit="return conf(this)" action="#">

和函數中（不要忘記聲明變量!!）：

function conf(form) 
{ 
    var box; 

    for (var i=0; i<5; i++) { 
     box = form.elements[i]; 

     if (!box.value) { 
      alert('You haven\'t filled in ' + box.name + '!'); 
      return false 
     } 
    } 
    return true; 
}

現在，您可以將表單ID更改爲任何內容（或將其刪除），並且該功能仍然有效。

此外，標籤元件與表單控件通過ID相關聯，而不是由名稱，以便：

<label for="txtalbum">Song/Album:</label> <input ... name="txtalbum" id="4">

應該是：

<label for="4">Song/Album:</label> <input ... name="txtalbum" id="4">

否則標籤將不會與相關聯該元素（因此也可以是跨度或類似的並且不具有用於屬性的）。

最後，請不要在HTML文檔中使用XML語法。在HTML文檔中，簡單忽略<br />和<input ... />中的/。

來源

2014-06-08 23:32:03 RobG

簡單的表單驗證幫助「無法讀取未定義的」

回答

相關問題