비밀번호 필드가있는 jQuery 폼 유효성 확인

Question

양식을 확인하려고하는데 비밀번호 필드의 필드에 값을 입력하지 않아도 항상 유효성을 검사합니다. 컨트롤을 텍스트로 변경하면 텍스트 상자에 아무 것도 입력하지 않으면 유효성 검사가 작동합니다. 아래 코드는 내 코드입니다. 내가 여기서 잘못하고있는 것이 무엇인지 알 수 없다.

<form id="frmChangePassword" action="http://localhost/PatientAccount" method="post"> 
    <div class="row"><input type="password" id="txtPWD" name="txtPWD" placeholder="" style="" class="text focus" value=""></div> 
    <div class="row"><input type="password" id="txtReEnterPWD" name="txtReEnterPWD" placeholder="" style="" class="text" value=""></div> 
    <div class="row"><input type="Button" ID="btnChangePassword" Name="btnChangePassword" STYLE="" Class="btn-submit" VALUE="Change Password" onClick="javascript:ValidateResetPassword();"></div> 
</form> 

<script> 
function ValidateResetPassword() { 
    $("#frmChangePassword").validate({ 
     rules: { 
      "txtPWD": { required:true }, 
      "txtReEnterPWD": { required:true } 
     }, 
     messages: { 
      "txtPWD": { required: "Please enter Password" }, 
      "txtReEnterPWD": {required: "Please re-enter password" } 
     } 
    }); 

    if ($("#frmChangePassword").valid()) { 
     hashPassword(); 
    } 
} 
</script> 

Answer 1

많은 문제가 있습니다.

1) Validate 플러그인을 호출하기 위해 제출 버튼에 인라인 JavaScript가 필요하지 않습니다. 이 플러그인은 내부적으로 submitHandler 콜백 함수로 처리합니다.

2) 제출 버튼은 <input type="submit"이어야합니다. 다른 것이 필요하다면 다른 코드가 필요할 것입니다.

3) .validate() 함수는 DOM 준비시 양식을 "초기화"하는 데에만 사용해야합니다. 단추를 클릭 할 때마다 호출되는 다른 함수 내에이를 잘못 포함했습니다.

4) if valid 조건부는 페이지가로드 될 때 한 번만 호출되므로 페이지로드시 양식이 항상 유효하지 않으므로 hashPassword() 함수는 현재 호출되지 않습니다. 양식이 유효 할 때마다 해당 기능을 수행하려면 submitHandler: 콜백 기능에 넣으십시오.

$(document).ready(function() { 

    $("#frmChangePassword").validate({ 
     rules: { 
      "txtPWD": { 
       required: true 
      }, 
      "txtReEnterPWD": { 
       required: true 
      } 
     }, 
     messages: { 
      "txtPWD": { 
       required: "Please enter Password" 
      }, 
      "txtReEnterPWD": { 
       required: "Please re-enter password" 
      } 
     }, 
     submitHandler: function (form) { 
      hashPassword(); 
      form.submit(); 
      // alert('valid form'); // for demo 
      // return false; // for demo 
     } 
    }); 

}); 

작업 데모 :

http://jsfiddle.net/zgwkR/

플러그인 문서 :

http://docs.jquery.com/Plugins/Validation

공식 샘플 양식 :

http://jquery.bassistance.de/validate/demo/