Question

这个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>

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

Answer 1

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

中

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

您还忘记为myform定义ID FORM。

定义form，如下所示。

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

，您无需调用函数onClick

Answer 2

选择器#myform与文档中的任何元素都不匹配。你拥有的唯一形式根本就没有id。

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

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

Answer 3

您的规则无效......

maxLength: 4

应该......

maxlength: 4

请注意，JavaScript区分大小写。

您的HTML格式也非常糟糕。只允许<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中并修复所有错误。

jQuery没有使用jsp页面

3 个答案: