用javascript配合css样式做了个类似tabstrip的简单功能。
我在第一个tab中放了一个TextBox,然后放了一个RequiredFieldValidator验证控件,如果不输入值直接提交就会有错误提示,并且焦点会定位到TextBox。现在的问题是我如果切换到了第二个tab上,这个时候提交,验证控件也有效,提交不了,但不会跳转到第一个tab上,怎么样让验证起作用之前先跳到tab1上,然后再定位到TextBox,不知道我的问题说明白了没有。
另:试了TextBox的onfocus事件,在这个中执行ShowTable(1),但无效。
附代码:直接复制到aspx文件中即可运行。<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>测试</title>
<style type="text/css">
.current
{
background-color: blue;
cursor: pointer;
}
.normal
{
background-color: white;
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server"> <script language='javascript' type="text/javascript">
function ShowTable(ID){
for (i=1;i<= 3;i++){
if(i == ID){
document.getElementById("TabTitle" + i).className="current";
document.getElementById("Table" + i).style.display="";
}
else{
document.getElementById("TabTitle" + i).className="normal";
document.getElementById("Table" + i).style.display="none";
}
}
}
</script> <table border="1" style="width: 80%; height: 25px;">
<tr align="center">
<td id="TabTitle1" class="current" onclick="ShowTable(1)">
基本信息</td>
<td id="TabTitle2" class="normal" onclick="ShowTable(2)">
联络信息</td>
<td id="TabTitle3" class="normal" onclick="ShowTable(3)">
备注信息</td>
</tr>
</table>
<table id="Table1" border="1" style="width: 80%; height: 200px;">
<tr>
<td>
客户名称:<asp:TextBox ID="TxtClientName" MaxLength="100" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="ValrClientName" runat="server" ControlToValidate="TxtClientName"
ErrorMessage="请输入客户名称" SetFocusOnError="True" />
</td>
</tr>
</table>
<table id="Table2" border="1" style="width: 80%; height: 200px; display: none">
<tr>
<td>
联络信息:XXX
</td>
</tr>
</table>
<table id="Table3" border="1" style="width: 80%; height: 200px; display: none">
<tr>
<td>
备注信息:CCC
</td>
</tr>
</table>
<br />
<asp:Button ID="BtnSave" runat="server" Text="提交" />
</form>
</body>
</html>
我在第一个tab中放了一个TextBox,然后放了一个RequiredFieldValidator验证控件,如果不输入值直接提交就会有错误提示,并且焦点会定位到TextBox。现在的问题是我如果切换到了第二个tab上,这个时候提交,验证控件也有效,提交不了,但不会跳转到第一个tab上,怎么样让验证起作用之前先跳到tab1上,然后再定位到TextBox,不知道我的问题说明白了没有。
另:试了TextBox的onfocus事件,在这个中执行ShowTable(1),但无效。
附代码:直接复制到aspx文件中即可运行。<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>测试</title>
<style type="text/css">
.current
{
background-color: blue;
cursor: pointer;
}
.normal
{
background-color: white;
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server"> <script language='javascript' type="text/javascript">
function ShowTable(ID){
for (i=1;i<= 3;i++){
if(i == ID){
document.getElementById("TabTitle" + i).className="current";
document.getElementById("Table" + i).style.display="";
}
else{
document.getElementById("TabTitle" + i).className="normal";
document.getElementById("Table" + i).style.display="none";
}
}
}
</script> <table border="1" style="width: 80%; height: 25px;">
<tr align="center">
<td id="TabTitle1" class="current" onclick="ShowTable(1)">
基本信息</td>
<td id="TabTitle2" class="normal" onclick="ShowTable(2)">
联络信息</td>
<td id="TabTitle3" class="normal" onclick="ShowTable(3)">
备注信息</td>
</tr>
</table>
<table id="Table1" border="1" style="width: 80%; height: 200px;">
<tr>
<td>
客户名称:<asp:TextBox ID="TxtClientName" MaxLength="100" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="ValrClientName" runat="server" ControlToValidate="TxtClientName"
ErrorMessage="请输入客户名称" SetFocusOnError="True" />
</td>
</tr>
</table>
<table id="Table2" border="1" style="width: 80%; height: 200px; display: none">
<tr>
<td>
联络信息:XXX
</td>
</tr>
</table>
<table id="Table3" border="1" style="width: 80%; height: 200px; display: none">
<tr>
<td>
备注信息:CCC
</td>
</tr>
</table>
<br />
<asp:Button ID="BtnSave" runat="server" Text="提交" />
</form>
</body>
</html>
但你如果想继续使用RequiredFieldValidator,在它的验证过程中加上客户端的方法可能不太容易,至少RequiredFieldValidator本身没有提供这样的功能。或者可以继承RequiredFieldValidator,重写一下里面的方法,没有试过,不太清楚。