Javascript多個字段/表單驗證

Question

是的，我知道堆疊涉及表單驗證有很多問題，但有些已經非常接近我想要完成的工作，我認爲這是獨一無二的。

我有this JS小提琴this我想使用的腳本將返回所有未填寫名稱的字段。我覺得這是因爲我在做這個下面的代碼，試圖實現與多個現場驗證的相同結果的更好的方法：

function validate () 
{ 
valid = true; 

if (document.contactinfo.Name.value == "") 
{ 
    alert ("You need to fill the name field!"); 
    valid = false; 
} 

    if (document.contactinfo.email.value == "") 
{ 
    alert ("You need to fill in your email!"); 
    valid = false; //change variable valid to false 
} 
return valid; 
} 

雖然上述作品，並推出多個警告框，我手動不得不提醒他們幾次在什麼領域需要填寫。我寧願發出警報，告訴他們一舉失蹤的領域，並將重點放回這些領域。 JS小提琴腳本這樣做，但是，我不斷得到的錯誤：ValidateRequiredFields is not defined ，我不明白問題在哪裏。我已經正確地命名了一切，並且表單數據應該越過。

有什麼想法？一如既往，如有需要，要求澄清。謝謝！

注：我不想使用JQuery，因爲我知道他們有非常簡單的插件，可以讓您設置所需的類！

Answer 1

我不知道小提琴錯誤，但你的腳本有severall改進：

您可以通過收集所有信息到一個字符串改善這一點，做一個警報

function validate () { 
    var valid = true; 
    var msg="Incomplete form:\n"; 
    if (document.contactinfo.Name.value == "") { 
    msg+="You need to fill the name field!\n"; 
    valid = false; 
    } 
    if (document.contactinfo.contact_email.value == "") { 
    msg+="You need to fill in your email!\n"; 
    valid = false; 
    } 
    if (!valid) alert(msg); 
    return valid; 
} 

改善現在

function validate () { 
    var valid = true; 
    var msg="Incomplete form:\n"; 
    if (document.contactinfo.Name.value == "") { 
    if (valid)//only receive focus if its the first error 
     document.contactinfo.Name.focus(); 
    //change border to red on error (i would use a class change here... 
    document.contactinfo.Name.style.border="solid 1px red"; 
    msg+="You need to fill the name field!\n"; 
    valid = false; 
    } 
    if (document.contactinfo.contact_email.value == "") { 
    if (valid) 
     document.contactinfo.contact_email.focus(); 
    document.contactinfo.contact_email.style.border="solid 1px red"; 
    msg+="You need to fill in your email!\n"; 
    valid = false; 
    } 
    if (!valid) alert(msg); 
    return valid; 
} 

，上面的鱈魚，焦點返回到第一個字段中的錯誤，改變邊界色域與問題e信號錯誤，將焦點返回到第一個錯誤，並將紅色邊界放在錯誤的字段上......仍然需要一些改進。 首先，我們需要在字段有效時刪除紅色邊框。這可以在上面的每個字段中使用其他字符來完成......但是我會假設每個字段只有一個錯誤條件，而且可能不會是這樣的。 例如：電子郵件字段可以檢查不空和有效的電子郵件

乾淨的一種方法是在開始時刪除所有紅色邊框，然後開始驗證。

style.border =「...」只是一個簡單的做法，我更喜歡類更改和類刪除，如果不是錯誤。

頂部的糖是：

- 我們需要一次現場變成有效去除紅色邊框

- 製作所有字段的數組包括姓名，條件和消息

自動化循環陣列的過程。這樣我們就可以做一個清理邊界的循環，另一個循環來檢查條件，以一個緊湊且可重用的代碼結束。