ASP.NET WebForms中的jQuery Validate Plugin中是否显示错误/成功图像图标？ [英] Error/Success image icons are not displaying in jQuery Validate Plugin in ASP.NET WebForms ?
本文介绍了ASP.NET WebForms中的jQuery Validate Plugin中是否显示错误/成功图像图标？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好。在我的一个网页中，我正在使用jQuery验证插件进行验证。 pluginjust工作正常除了它没有显示错误图标/图像我尝试了一切但没有用。所以，任何人都可以确定我在哪里做错了请纠正我。我在这里发送我的表单代码。请仔细阅读。
Hi to all.In one of my webpages i'm using jQuery validation plug in for validation purpose. The pluginjust working fine except that it is not showing error icons/images I tried everything but no use. So, anyone can identify where I am doing wrong please correct me. Here I am sending my form code. Please go through it.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Finance.aspx.cs" Inherits="Finance" %>
<!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>jQuery Validation Demo</title>
<style type="text/css">
.style1
{
width: 100%;
}
.style3
{
width: 68px;
}
</style>
<script type="text/javascript" src="Scripts/jquery-2.0.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script>
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function () {
$('#form1').validate({
rules: {
txtFirstname: {
required: true
},
txtLastname: {
required: true
},
txtCity: {
required: true
},
txtDesignation: {
required: true
}
},
messages: {
txtFirstname: {
required: "Enter First Name"
},
txtLastname: {
required: "Enter Last Name"
},
txtCity: {
required: "Enter City"
},
txtDesignation: {
required: "Enter Designation"
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
$(element).text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success');
}
});
});
</script>
<link href="Styles/StyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="control-group">
<table class="style1">
<tr>
<td class="style3">
First Name</td>
<td>
<asp:TextBox ID="txtFirstname" runat="server">
</td>
</tr>
<tr>
<td class="style3">
Last Name</td>
<td>
<asp:TextBox ID="txtLastname" runat="server">
</td>
</tr>
<tr>
<td class="style3">
City</td>
<td>
<asp:TextBox ID="txtCity" runat="server">
</td>
</tr>
<tr>
<td class="style3">
Designation</td>
<td>
<asp:TextBox ID="txtDesignation" runat="server">
</td>
</tr>
<tr>
<td class="style3">
</td>
<td>
<asp:Button ID="btnAdd" runat="server" onclick="btnAdd_Click" Text="Submit" />
<input id="Reset1" type="reset" value="Reset" /></td>
</tr>
<tr>
<td class="style3">
</td>
<td>
</td>
</tr>
</table>
</div>
</form>
>/body>
</html>
CSS File :
label.valid {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
background: url("/Images/valid.png") no-repeat 0px 0px;
}
label.error {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
background: url(/Images/invalid.png) no-repeat 0px 0px;
}
推荐答案
（ function （）{
（' ＃form1'）。validate（{
规则：{
txtFirstname：{
required： true
}，
txtLastname：{
required ： true
}，
txtCity：{
required： true
}，
txtDesignation：{
required： true
}
}，
条消息：{
txtFirstname：{
required： 输入名字
}，
txtLastname：{
required： 输入姓氏
}，
txtCity：{
required： 输入城市
}，
txtDesignation：{
r equired： 输入名称
}
}，
高亮显示： function （element）{
('#form1').validate({ rules: { txtFirstname: { required: true }, txtLastname: { required: true }, txtCity: { required: true }, txtDesignation: { required: true } }, messages: { txtFirstname: { required: "Enter First Name" }, txtLastname: { required: "Enter Last Name" }, txtCity: { required: "Enter City" }, txtDesignation: { required: "Enter Designation" } }, highlight: function (element) {
（element）.closest（' .control-group'）。removeClass（' 成功'）。addClass（' error'）;
}，
成功：功能（元素）{
(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function (element) {
这篇关于ASP.NET WebForms中的jQuery Validate Plugin中是否显示错误/成功图像图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
