无法在带有span的表单验证中显示所有警告消息

时间:2011-10-20 13:01:38

标签: php javascript validation

我正在使用validation.thats我的简单表单字段制作用户注册表单。

<tr>
    First Name:
    <input type="text" name="fname" id="letters"  /><span id="error" style="color:red;"></span>
<tr>

<tr>  
    Last Name:
    <input type="text" name="lname"  id="letters1"  /><span id="error1" style="color:red;"></span>
</tr>
<input type="submit" value="submit" name="submit" />

我正在使用提交onsubmit =“验证函数”返回ValidateForm();

在验证功能

function ValidateForm(){

    if (document.reg.fname.value=="" || !document.reg.fname.value.match(/[^\s]/))
    {
        document.getElementById("error").innerHTML = "enter first Name"
        return false;
    }
    else
    {
        document.getElementById("error").innerHTML = '';

    }

    if (document.reg.lname.value=="" || !document.reg.lname.value.match(/[^\s]/))
    {
        document.getElementById("error1").innerHTML = "enter last Name"
        return false;
    }
    else{
        document.getElementById("error1").innerHTML = '';

    }

但是当我提交按钮时尝试...错误信息只显示第一个输入框,当我填写第一个框然后提交..这次错误信息显示第二个文本框。我想同时显示所有错误消息。

2 个答案:

答案 0 :(得分:1)

删除测试之间的返回false

为了快速修复您的代码,我会做类似的事情

DEMO HERE

function ValidateForm(theForm) {
    var error1 = (theForm.fname.value=="" || !theForm.fname.value.match(/[^\s]/))
    document.getElementById("error1").innerHTML = (error1)?"enter first Name?":"";
    var error2 = (theForm.lname.value=="" || !theForm.lname.value.match(/[^\s]/));
    document.getElementById("error2").innerHTML = (error2)?"enter last Name":"";
    return !error1 && !error2
}

并且

<form onsubmit="return ValidateForm(this)">
<table>
  <tr>
    <td>First Name: <input type="text" name="fname" id="letters"  /><span id="error1" style="color:red;"></span></td>
  </tr>
  <tr>  
    <td>Last Name:  <input type="text" name="lname"  id="letters1" /><span id="error2" style="color:red;"></span></td>
  </tr>
</table>
<input type="submit" value="submit" name="Submit" />
</form>

答案 1 :(得分:1)

那是因为你使用return,它会立即退出该功能。

您应该保留一个变量,比如最初设置为var valid的{​​{1}},并在发生错误时将其设置为true,现在您使用false

然后,在函数结束时,使用return false