表单验证，不会显示div标签中的错误

Question

Ok, i have form with few inquiries. I started to write my validation code for it , but my errors wont show. It founds errors because it changes state of div from hidden to visible, but wont show type of error.

Here is my valform.js

reason = "";
function validateForm(form) 
{
    reason += validateAge(form.age);
    if (reason != "") 
    {
        document.getElementById('erbox').style.visibility = 'visible';
        return false;
    }
    return true;
}

function validateAge(fld)
{
    function isNumber (o) 
    {
        return ! isNaN (o-0);
    }

    var error ="";
    var x=fld.value;
    if (x==null || x=="" )
    {
        error="Age must be filled";
    }
    else if (isNumber(x)==false) 
    {
        error="Your age is not numeric value!";
    }
    else if (x<18) 
    {
        error = "You need to be 18 or older!";
    }
    return error;
}

And here is my html form:

<div id="upform">
<form name="lastcheck" action="lastcheck.php" method="post" onsubmit="return  
    validateForm(this);">
    Location: <input type="text" name="locationcity">
    Country:  <input type="text" name="country">
    Gender:  <input type="radio" name="group1" value="w"> Woman<br>
    <input type="radio" name="group1" value="m"> Man<br>
    Age: <input type="number" name="age" size="4" maxlength="2">
    <input type="submit" value="Submit">
    <div style="visibility:hidden" id="erbox">Next error(s) occured: 
    <script type="text/javascript"> document.write.lastcheck('reason');
    </script>
    </div>
    </form> 
</div>

I included js file in header like this:

<script src="js/valform.js"></script>

So for now when it error occurs in AGE field my hidden error form becomes visible but no info about errors.

I have another problem, still learning javascript:

so wanted to add radio button validation and it breaks my whole validation:

function vGender(fld) {

var x = fld.value;


var i = 0;
while (i < x.length) {
    if (x[i].checked) formValid = true;
    i++;        
}

if (!formValid) error = "blabla";
return error;
}​

and i added another reason at top like this:

reason += vGender(form.radios);

Answer 1

document.write.lastcheck('reason'); 

That would populate your div on load - your validation function is only showing it, but not populating it with a new message so it's empty.

Try this:

if (reason != "") {
    var box = document.getElementById('erbox');
    box.style.visibility = 'visible';
    box.innerHTML = 'Next error(s) occurred: ' + reason; // here you go
    return false;
}