表格验证,div标签中的错误不会显示

时间:2013-01-12 00:22:07

标签: javascript html validation

好的,我的表格很少询问。我开始为它编写验证代码,但我的错误不会显示。它发现错误,因为它将div的状态从隐藏更改为可见,但不会显示错误类型。

这是我的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;
}

这是我的html表单:

<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>

我在标题中包含了js文件,如下所示:

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

所以现在当AGE字段发生错误时,我的隐藏错误表单变得可见,但没有关于错误的信息。

我还有另一个问题,还在学习javascript:

所以想要添加单选按钮验证,它会破坏我的整个验证:

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;
}​

我在上面添加了另一个原因:

reason += vGender(form.radios);

1 个答案:

答案 0 :(得分:1)

document.write.lastcheck('reason'); 

这将填充你的div 加载 - 你的验证功能只显示它,但不会用新消息填充它,所以它是空的。

试试这个:

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