-2

此 jsp 页面未使用 jQuery 进行验证。请检查 jsp 页面包含两个需要验证的表单字段。我想我遗漏了一些东西。应该验证文本字段以检查数字和最多 4 个数字。

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">



    </head>
    <body>
    <form action="ChangePIN"  id="myform"  method="post" >
        <table width="100%" height="100%">
            <tr>
                <td colspan="2"><%@include file="atmAdmin.jsp"%>
                </td>
            </tr>
            <tr height="100%">
                <td colspan="2" align="center">
                    <div style="">Enter old and new PIN</div>
                    <table style="font-family: verdana font-size : 38px" align="center">

                        <tr>
                            <td></td>
                        </tr>

                        <tr>
                            <td font-size="28px">Enter Old PIN No.</td>
                            <td><input type="name" id="oldPin" name="oldPin">
                            </td><td><span id="m1" ></span>
                                </td>
                        </tr>
                        <tr>
                            <br>
                            <td></td>

                        </tr>
                        <td></td>
                        </tr>
                        <tr>
                            <td font-size="28px">Enter New Pin</td>
                            <td><input type="name" id="newPin" name="newPin" >
                            </td><td><span id="m2" ></span>
                                </td>
                        </tr>
                        <tr>
                            <br>
                            <td></td>
                            <td align="center"><input type="submit" value="submit" >
                            </td>
                        </tr>
                        </form>

                    </table></td>
            </tr>
            <tr width="22px" valign="bottom">
                <td colspan="2"><%@include file="atmFoot.jsp"%>
                </td>
            </tr>
        </table>
                        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
                        <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
                        <script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
                        <script>
                        //just for the demos, avoids form submit
$(document).ready(function(){
                        jQuery.validator.setDefaults({
                        debug: true,
                        success: "valid"
                        });
                        $( "#myform" ).validate({
                        rules: {
                        oldPin: {
                        required: true,
                        digits: true,
                        maxLength: 4
                        },
                        newPin: {
                        required: true,
                        digits: true,
                        maxLength: 4
                        }
                        }
                        });
});
                        </script>

    </body>
    </html>

请帮助我，因为我是新手。

4

3 回答 3

0

您需要将代码包装在 document.ready 中。

$(function(){
   // validation code
});

而且您还忘记myform为FORM.

定义form如下。

<form action="ChangePIN"  id="myform"  method="post">

你不需要调用函数onClick

于 2013-09-18T12:09:14.963 回答
0

选择器#myform与文档中的任何元素都不匹配。您拥有的唯一表单根本没有 id。

此外，您的 HTML 存在许多有效性错误，其中最重要的是表单不能是表格的子元素或表格行的父元素。浏览器中的错误恢复机制通常会移动表单，使其出现在表格之后（但会将输入留在后面）。使用验证器。

你的表单有一个onclick属性（它很少有意义，通常你会想要onsubmit，并且你会用 JS 而不是 HTML 绑定事件处理程序）它调用Val你没有定义的函数。

于 2013-09-18T12:09:27.637 回答
0

你的规则无效...

maxLength: 4

应该...

maxlength: 4

请注意，JavaScript 区分大小写。

您还拥有非常畸形的 HTML。只有特定的元素 like<td>才允许成为<table>标签的直接后代。

<form>
    <table>
        ....
        <table>
             ....
        </form>  <!-- you can't close form here! -->
    </table>
    ....
</table>

应该...

<form>
    <table>
        ....
            <table>
                ....
            </table>
        ....
    </table>
</form>

您仍然有无效的 HTML、一些我不想追踪的杂散td或标签。tr至少验证现在正在工作......

工作演示：http: //jsfiddle.net/eM2TK/

我建议您通过W3C HTML Online Validator Tool输入您的代码并修复所有错误。

于 2013-09-18T20:22:31.103 回答