jQuery 다른 필드에 값이있는 경우에만 숨겨진 입력의 유효성을 검사하십시오.

Question

양식이 있는데 암호 필드가 입력 된 경우 유효성을 검사하기 위해 숨겨진 입력을받는 데 문제가 있습니다.

<div class="form-group"> 
    <label for="password" class="control-label col-sm-4">Password: </label> 
    <div class="col-lg-6"> 
     <input type="password" placeholder="Your Password" id="password" name="password" class="form-control" autocomplete="off"> 
    </div> 
</div> 

<div class="form-group"> 
    <label class="control-label col-sm-4">Password Strength</label> 
    <div class="col-sm-6" id="password-meter"> 
     <div class="progress"> 
      <div class="progress-bar" id="password-meter-progress"></div> 
      <input type="hidden" name="password_strength" id="password_strength"> 
     </div> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="confirm_password" class="control-label col-sm-4">Confirm Password: </label> 
    <div class="col-lg-6"> 
     <input type="password" placeholder="Confirm Password" id="confirm_password" name="confirm_password" class="form-control" autocomplete="off"> 
    </div> 
</div> 

이와 같은 버튼을 클릭하면 아무런 변화가 없습니다. 나는 v.errorList을 로그 아웃 시도했지만 거기에 아무것도 표시되지 않습니다 여기

$('#button').click(function() { 
    if (v.form()) { 
     $('.frm').hide('fast'); 
     $('#sf2').show('slow'); 
    } 
}); 

내 유효성 검사 코드

function isPasswordPresent() { 
    return $('#password').val() !== ''; 
} 
var v = $('#onboardingform').validate({ 
    ignore: [], 
    rules: { 
     password: { 
      required: true, 
      minlength: 6, 
     }, 
     confirm_password: { 
      required: true, 
      minlength: 6, 
      equalTo: "#password", 
     }, 
     password_strength: { 
      min: { 
       depends: isPasswordPresent, 
       param: 60 
      } 
     } 
    }, 
    messages: { 
     password_strength: { 
      min: 'Enter a strong password' 
     } 
    }, 
    errorElement: "span", 
    errorClass: "help-inline", 
}); 

Answer 1

견적 comment입니다 :

"나는 문제가 함께 발견 ignore: [],. 양식을 제거해도 양식의 유효성은 검사되지만 종속 규칙은 더 이상 작동하지 않습니다. "

그건 의미가 없습니다. ignore: []은 단순히 아무 것도 무시하지 않는 것을 의미합니다. 숨겨진 모든 필드를 포함하여 모든 필드의 유효성을 검사합니다. 제목에서 알 수 있듯이 숨겨진 필드의 유효성을 검사하려면 []과 같이 ignore 옵션을 설정해야합니다.

---

또한 필드에 값이 있는지 여부를 테스트하기 위해 외부 함수를 작성할 필요가 없습니다. 플러그인은 :filled 및 :blank 선택기를 제공합니다.

$('#password').is(':filled')을 사용하여 입력했는지 확인하거나 !$('#password').is(':blank')을 사용하여 비어 있지 않은지 확인하십시오.

password_strength: { 
    min: { 
     depends: function(element) { 
      return $('#password').is(':filled'); 
      // return !$('#password').is(':blank'); 
     }, 
     param: 60 
    } 
} 

참조 : jqueryvalidation.org/category/selectors/

개념 증명 데모 : jsfiddle.net/g6hq8o7y/