Question

当我的表单字段为空时，我能够显示警告消息，但我想在空字段前显示红色的消息，就像在雅虎注册表单中我不知道如何做到这一点可以解释任何一个它

function validate_form ( )
{
    valid = true;


        if ( document.form.login.value == "" )
        {
            valid = false;
            document.getElementById("LoginError").visible=false;

        }
        else
        {
            document.getElementById("LoginError").visible=false;
        }
        if(document.form.password.value == "" )
        {
            valid = false;
            document.getElementById("PasswordError").visible=false;

        }
        else
        {
            document.getElementById("PasswordError").visible=false;
        }

        return valid;
}

//-->

</script>

<form name="form" method="post" action="UserLogin" onSubmit="return validate_form();">
          <table width="592" height="127" border="0">
            <tr>
              <td width="46" height="29">&nbsp;</td>
              <td colspan="3"><%! private Boolean bRecord = false;
          private Boolean bLogin = false;
       %>
                <% if(request.getAttribute("signup") != null)
            bRecord =(Boolean)request.getAttribute("signup");
        else
            bRecord = false;

        if(request.getAttribute("invalidlogin") != null)
            bLogin =(Boolean)request.getAttribute("invalidlogin");
        else
            bLogin = false;

        if(bRecord == true )
        {%>
                <font color="#336600"><b>You are Successfully Signed Up</b></font>
                <%
        request.removeAttribute("signup");
        }//end if
        if(bLogin == true )
        {%>
                <font color="#FF0000"><b>Invalid Login or Password</b></font>
                <%
        request.removeAttribute("invalidlogin");
        }//end if

      %></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td width="135"><div class="style1">LOGIN: </div></td>
              <td width="146"><input type="text" name="login"></td>
              <td width="247">*<span id="LoginError" visible="false" style="color: Red;">Enter login</span>

 </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><div class="style1">PASSWORD: </div></td>
              <td><input name="password" type="password" id="password"></td>
              <td>*<span id="PasswordError" visible="false" style="color: Red;">enter Password</span></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td align="right"><input name="Submit" type="image" class="bgtop" value="SIGN IN" src="images/btn_s.JPG" border="0"  >
              </td>
              <td>&nbsp;</td>
            </tr>
          </table>
        </form>

问候

Answer 1

您只需在字段前添加不可见的范围

即可

<span id="spanUsernameRequired" style="visibility: hidden; color: Red;">
     This information is required</span>
<input id="username" type="text" />
<a href="#" onclick="return validate_form();">Submit</a>

，然后在字段为空时将其显示

function validate_form()
{      
    if (document.getElementById("username").value == "")
    {
        document.getElementById("spanUsernameRequired").style.visibility = 'visible';
        return false;
    }    
    else
        document.getElementById("spanUsernameRequired").style.visibility = 'hidden';

    return true;
}

如何像雅虎注册页面一样验证我的网页表单？

1 个答案: