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

cannot display all warning message in form validation with span

本文关键字：显示 消息 警告 验证 span 表单      更新时间：2023-09-26

我正在制作一个具有验证的用户注册表单。这是我的简单表单字段。

<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="return 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 = '';
    }

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

删除测试之间的返回false

为了快速修复你的代码，我会这样做

演示

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>

这是因为您使用了return，它会立即退出函数。

您应该保留一个变量，例如您最初设置为true的var valid，当发生错误时，将其设置为false，而您现在使用return false。

然后，在函数的末尾，使用return valid。

相关文章：