1
下の完全なコードでわかるように、私はjQueryのValidationプラグインを使用して、Change My Passwordフォーム（jQuery-UIダイアログボックスに表示されます）。 （新しいパスワードと同じに必要な、）jQuery Validationプラグインの問題：すべてのフィールド（1つだけ）を検証しません
- 既存のパスワード（必須）
- 新しいパスワード（必要に応じ、5〜20文字）
- 確認新しいパスワード ：
フォームは、3つの入力ボックスを持っています
これは非常に簡単ですが、バリデーターではユーザーが既存のパスワードのみを入力して他のフィールドをスキップできることがわかりました。どうすれば違うのですか？ありがとう！
完全なコード
<!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>
Validatorは1つのフィールドのみを検証しているか、一部のフィールドにデータを入力できないことがあります（つまり、入力できます）。 – Michael
ユーザーは、3つのフィールドのいずれか/すべてに情報を入力できます。検証は、最初のパスの最初のフィールドでのみ機能します。バリデーションの第2段階では、他の分野の少なくとも1つを認識しているようです。 – Ryan