javascript validate form check - echo out errors in form？

Question

我目前已經有一個驗證我的表單並顯示錯誤，如果一個字段沒有完成的JavaScript代碼。我也想知道我怎麼可以在窗體中回顯錯誤，例如，如果'fname'沒有填寫，那麼這說'你沒有填寫fname'，或者如果'fname'和fcompany'沒有填寫在這裏說

You did not fill in fname 
you did not fill in fcompany 

繼承人我的html：

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> 
Company Name: <input type="text" name="fname"> 
Company Registration Number: <input type="text" name="fcompany"> 

繼承人我的javascript：

<script> 
function validateForm() 
{ 
var x=document.forms["myForm"]["cname"].value; 
if (x==null || x=="") 
    { 
document.body.scrollTop = document.documentElement.scrollTop = 0; 
    document.getElementById("alertBox").style.display='block'; 
    return false; 
    } 
} 
</script> 

Answer 1

讓你的驗證函數生成錯誤的數組，然後讓另一個函數採取錯誤陣列和構建HTM L：。

http://jsfiddle.net/J9LJj/

function displayErrors(errors){ 
    var container = document.getElementById("alertBox"); 
    var html = "<ul>"; 

    for(var i=0; i<errors.length; i++){ 
     html += "<li>" + errors[i] + "</li>"; 
    } 
    html += "</ul>"; 

    container.innerHTML = html; 
    container.style.display = "block"; 
} 

function validateForm(){ 
    var fname = document.forms["myForm"]["fname"].value; 
    var fcompany= document.forms["myForm"]["fcompany"].value; 

    var errors = []; 

    if(fname == ""){ 
     errors.push("you did not fill in fname"); 
    } 
    if(fcompany == ""){ 
     errors.push("you did not fill in fcompany"); 
    } 

    if(errors.length > 0){ 
     displayErrors(errors); 
     return false; 
    } else { 
     return true; 
    } 
}