我有一个页面,其中有一个放置在更新面板中的GridView。 GridView中的每一行都有一个更新按钮,当单击时,将弹出一个模态对话框,您可以在其中编辑相应的行并通过Web服务调用将记录保存到数据库。以下是aspx和jquery代码。我的问题是我想要使txtName和txtDescription成为必需。如您所见,模式对话框中的“保存”按钮在jquery函数中创建。我应该如何向这些字段添加必填字段验证器?当用户单击“保存”按钮时,如果txtName或txtDescription为空,则旁边应显示带有“required!”文本的红色标签,焦点将设置为第一个为空的字段。
<div id="dvMainContainer">
<asp:UpdatePanel ID="upMainPanel" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<table summary="content" id="Table3">
<tr>
<td>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="false" AutoGenerateColumns="False" PageSize="20"
onpageindexchanging="GridView1_PageIndexChanging">
<Columns>
<asp:TemplateField >
<ItemTemplate>
<div><input type="button" value="update" /></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField >
<HeaderTemplate>Vendor<br />
<asp:DropDownList ID="ddlVendor" runat="server" AutoPostBack="true" AppendDataBoundItems="true" OnSelectedIndexChanged="OnVendorChanged">
<asp:ListItem Text="- Select a Vendor -" Value=""></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate><%#Eval("Vendor") %></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" >
<ItemTemplate><%#Eval("Name")%></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description" >
<ItemTemplate><%#Eval("Description")%></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<div id="dvUpdatePrompt" style="display: none;" runat="server">
<table>
<tr>
<td>Vendor:</td>
<td><select name="VendorList" id="VendorList"></select></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="txtName"/></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" id="txtDescription"/></td>
</tr>
</table>
</div>
this.BindEvents = function () {
var myself = this;
$(myself.get_element()).find("input[value='update']").each(
function () {
var input = $(this);
if (input.closest('tr').find('td')[1].innerText.replace(' ', '') != '') {
input.click(
function () {
myself.UpdateButtonClicked(this);
}
);
}
else {
input.attr('disabled', 'disabled');
}
}
);
}
this.UpdateButtonClicked = function (button) {
var myself = this;
var btns = {};
var Vendor = "";
var Name = "";
var Description = "";
…
btns["Save"] = function () {
myself.UpdateVendor(button);
};
btns["Cancel"] = function () { $("#dvUpdatePrompt").dialog('close'); };
…
$("#dvUpdatePrompt").dialog({
modal: true,
buttons: btns,
width: 500,
height: 300
});
}
this.UpdateVendor = function (button) {
var myself = this;
…
var parmIn = "…";
myself.Utilities.CallWebService('WebService.asmx/UpateVendor', parmIn,
function (result) {
$("#dvUpdatePrompt").dialog('close');
...
}
);
}
更新:我在this.BindEvents函数中添加了以下代码:但它无效?
$("#txtName").blur(function () {
if (!$(this).val()) {
$(this).parents('p').addClass('warning');
}
});