jQuery validation plugin과 ASP.NET의 조합 ASP.NET
2010.06.22 00:33 EDIT
jquery validation plugin과 asp.net을 함께 사용하는 첫 번째 예제.
국내의 많은 홈페이지에서 하는 대로, 검증을 통과하지 못하면
가장 첫 번째 컨트롤의 메시지 하나만 경고창으로 띄우도록 만든 것이 특징.
잘 동작하지만 서버사이드 검증의 경우 별도의 작업을 해 주어야 하는 번거로움이 있다.
jquery 1.4.2, jquery-validation 1.7, .net framework 3.0 을 사용했다.
우선 login.aspx :
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script src="/web.admin/js/jquery.js" type="text/javascript"></script>
<script src="/web.admin/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var submitted = false;
$("#form1").validate({
rules: {
<%=TxtLoginID.UniqueID %>: {
required: true,
minlength: 4
},
<%=TxtLoginPwd.UniqueID %>: {
required: true,
minlength: 4
}
},
messages: {
<%=TxtLoginID.UniqueID %>:{
required: "<%=web.Common.ClientMessage.VALIDATE_IDRequired %>",
minlength: "<%=web.Common.ClientMessage.VALIDATE_IDMinLength %>"
},
<%=TxtLoginPwd.UniqueID %>:{
required: "<%=web.Common.ClientMessage.VALIDATE_PasswordRequired %>",
minlength: "<%=web.Common.ClientMessage.VALIDATE_PasswordMinLength %>"
}
},
showErrors: function(errorMap, errorList) {
if (submitted) {
alert(errorList[0].message);
submitted = false;
}
},
invalidHandler: function(form, validator) {
submitted = true;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>ID : <asp:TextBox ID="TxtLoginID" runat="server" /></li>
<li>Password : <asp:TextBox ID="TxtLoginPwd" runat="server" TextMode="Password" /></li>
</ul>
<asp:Button ID="Button1" runat="server" Text="로그인" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
다음은 메시지를 일괄 관리하는 ClientMessage.resx :
ClientMessage.resx
- Tag :
- jquery, asp.net, validation