jQuery validation plugin과 ASP.NET의 조합 ASP.NET

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 :
, ,

Leave Comments