Question

正如您在下面的完整代码中所看到的，我正在尝试使用jQuery的Validation插件来进行一些非常简单的验证Change My Password表单（显示在jQuery-UI对话框中）。

表单有3个输入框：

现有密码（必填）
新密码（必填，5-20个字符）
确认新密码（必填，与新密码相同）

这应该非常简单，但我发现验证器允许用户只键入现有密码并跳过其他字段。我该怎么办？谢谢！

完整代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <link href="http://localhost:8080/css/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" /> 
            <script src="http://localhost:8080/js/jquery-1.4.3.min.js" type="text/javascript" ></script> 
            <script src="http://localhost:8080/js/jquery.validate.min.js" type="text/javascript"></script> 
            <script src="http://localhost:8080/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> 
        </head> 
        <body> 
            <style>
                .error{
                    color:red;
                    font-size:8pt;
                }
                .valid{
                    color:green;
                }
            </style>
            <form id="usersForm" action="profile/save" method="POST">
                <a href="#" id="changePasswordLink">Change my password</a>
            </form>

            <div id="dialog-changePassword" title="Update My Password">    
                <form id="changePasswordForm">
                    <table>
                        <tr>
                            <td style="font-weight:bold;text-align:right;padding-right:1em;">
                                <span>Current Password: </span>
                            </td>
                            <td>
                                <input type="password" class="currentPassword" id="currentPassword" /> 
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight:bold;text-align:right;padding-right:1em;">
                                <span>New Password: </span>
                            </td>
                            <td>
                                <input type="password" class="newPassword" id="newPassword" /> 
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight:bold;text-align:right;padding-right:1em;">
                                <span>Confirm New Password: </span>
                            </td>
                            <td>
                                <input type="password" class="confirmPassword" id="confirmPassword" /> 
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </body>
    </html>
    <script type="text/javascript">
        $(document).ready(function() {

            $( "#changePasswordLink" ).click(function(){
                $('#changePasswordForm').validate({
                    success: function(label) {
                        label.addClass("valid").html("OK!");
                    }});

                jQuery.validator.addClassRules({
                    currentPassword: {
                        required: true
                    },                   
                    newPassword: {
                        required: true,
                        minlength: 5,
                        maxlength: 20
                    },
                    confirmPassword: {
                        equalTo: "#newPassword"
                    }                        
                });
                //alert(JSON.stringify($("#currentPassword").rules()));            
                //                        alert(JSON.stringify($("#newPassword").rules()));            
                //                      alert(JSON.stringify($("#confirmPassword").rules()));
                $( "#dialog-changePassword" ).dialog('open');
            });

            $( "#dialog-changePassword" ).dialog({
                modal: true
                ,autoOpen:false     
                ,resizable:false
                ,width:600
                ,buttons: { 
                    "Update My Password": function() { 
                        //                    $("#changePasswordForm input").each(function(){
                        //                       var me=$(this); 
                        //                       alert(JSON.stringify(me.rules()));
                        //                    });
                        var errorCount=$('#changePasswordForm').validate().numberOfInvalids();
                        //$('#changePasswordForm').valid()
                        if(!errorCount && $('#changePasswordForm').valid()){
                            $(this).dialog("close");
                            var userId='1';
                            var currentPassword=$('#currentPassword').val();
                            var newPassword=$('#newPassword').val();
                            var confirmPassword=$('#confirmPassword').val();
                            alert('ajax would submit the info now');
                        }else{
                            alert("There are still "+errorCount+" errors.")
                        }
                    }
                    ,"Cancel": function() { $(this).dialog("close"); }
                }
            });
        });//end docReady
    </script>

Answer 1

我认为jQuery Validation的行为与此类似的原因是因为您的输入元素没有名称属性。为每个输入元素指定一个唯一的名称属性，然后它将验证您的所有字段。

Answer 2

您正在混合使用$(...)和Jquery(...)您应该更新您的代码以使用其中一个。除非与其他图书馆发生冲突，否则首选$(...)。

jQuery Validation插件的问题：它不会验证所有字段（只有一个）

2 个答案: