Question

when i hit submit without inserting text it shows "*this filed is empty"... this is fine but when i put the value in first name n hit on submit it shows like belove image

after inputing first name n hit submit

reg.jsp 我是从昨晚开始的...如果有人能让我从这里出来的话，我会说实话......

<%@page import="javax.websocket.Session"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Form using jsp</title>
</head>
<script type="text/javascript">

        function f() {

            var fn1 = document.getElementById("fn");
            var sfn1 = document.getElementById("sfn");

            if(fn1.value=="")
                {

                    fn1.style.border="1px solid red";
                    sfn1.style.display="";
                    return false;       
                }


            var ln1 = document.getElementById("ln");
            var sln1 = document.getElementById("sln");

            if(ln1.value=="")
                {
                    ln1.style.border="1px solid red";
                    sln1.style.display="";
                    return false;
                }


            var un1 = document.getElementById("un");
            var sun1 = document.getElementById("sun");

            if(un1.value=="")
                {
                    un1.style.border="1px solid red";
                    sun1.style.display="";
                    return false;
                }


            var ea1 = document.getElementById("ea");
            var sea1 = document.getElementById("sea");

            if(ea1.value=="")
                {
                    ea1.style.border="1px solid red";
                    sea1.style.display="";
                    return false;
                }

            var cn1 = document.getElementById("cn");
            var scn1 = document.getElementById("scn");

            if(cn1.value=="")
                {
                    cn1.style.border="1px solid red";
                    scn1.style.display="";
                    return false;
                }


        }

</script>

<body bgcolor="#ffffcc">
<h1 align="center">Regestration Form</h1>
<form action="save.jsp" method="post" name="myForm" >

<table align="center" bgcolor="#66ccff" cellpadding="10dx" cellspacing="20dx">  


    <tr>
        <td><b>First Name </b></td>
        <td><b>:</b></td>
        <td><input type="text" name="Fname" value=""  id="fn" placeholder="Enter Your First Name..."></td>
        <td><span style="display:none;color: red;" id="sfn">*This field is Empty</span></td>
    </tr>

    <tr>
        <td><b>Last Name </b></td>
        <td><b>:</b></td>
        <td><input type="text" name="Lname" value="" id="ln" placeholder="Enter Your Last Name..."></td>
        <td><span style="display:none;color: red;" id="sln">*This field is Empty</span></td>

    </tr>

    <tr>
        <td><b>Username </b></td>
        <td><b>:</b></td>
        <td><input type="text" name="Uname" value="" id="un" placeholder="Enter User Name..." ></td>
        <td><span style="display:none;color: red;" id="sun">*This field is Empty</span></td>

    </tr>

    <tr>
        <td><b>Email Address </b></td>
        <td><b>:</b></td>
        <td><input type="text" name="Eadd" value="" id="ea" placeholder="Enter Your Email Address..."  ></td>
        <td><span style="display:none;color: red;" id="sea">*This field is Empty</span></td>
    </tr>

    <tr>
        <td><b>Contact Number </b></td>
        <td><b>:</b></td>
        <td><input type="text" name="cnt" value="" id="cn"   placeholder="Enter Your Contact Number..."  ></td>
        <td><span style="display:none;color: red;" id="scn">*This field is Empty</span></td>
    </tr>

    <tr>
        <td><b>Password </b></td>
        <td><b>:</b></td>
        <td><input type="password" name="pass1" value="" id="ps" placeholder="Enter Your Password..." ></td>
        <td><span style="display:none;color: red;" id="sps">*This field is Empty</span></td>

    </tr>

    <tr>
        <td><b>Gender </b></td>
        <td><b>:</b></td>
        <td><input type="radio" name="gen" value="0" checked="checked">Male</input>
            <input type="radio" name="gen" value="1">Female</input>
        </td>
    </tr>

</table>
</br>
<table align="center" bgcolor="#99ff33">    
    <tr>
        <td><input type="submit" name="submit" onclick="return f()" align="center" style="color: green" ></td>
    </tr>

</table>
</form>
</body>
</html>

Answer 1

如果传递了给定条件，则添加else部分以隐藏验证消息

   if(fn1.value=="")
    {
        fn1.style.border="1px solid red";
        sfn1.style.display="";
         return false;       
    }
    else{
        sfn1.style.display="none";
    }

使用javascript＆amp; jsp在jsp中重新验证表单验证（跨度）

1 个答案: