jQuery 유효성 검사 - 체크 박스가 선택된 경우 입력 값 확인

Question

SMS 업데이트 옵션이있는 전화 번호의 입력란이 있습니다. 번호가 휴대폰 번호인지 SMS 체크 박스가 선택되었는지 확인하고 싶습니다. 정규식이 작동하고 있는데이 검사는 유효하지만 확인란을 선택하지 않아도 '모바일 요구'오류가 표시됩니다.

$.validator.addMethod(
     "regex", 
     function(value, element, regexp) { 
     if($('#receive_sms_updates').is(':checked')) { 
      var check = false; 
      var re = new RegExp(regexp); 
      return this.optional(element) || re.test(value); 
     } 
     }, "Mobile Required" 
    ); 


    $("form#patient-detials").validate({ 
     rules: { 
     'patient[person_attributes][phone_mobile]': { 
      maxlength: 10, 
      minlength: 10, 
      digits: true, 
      regex: "^04[0-9]{8}" 
     } 
     } 
    }); 

Answer 1

업데이트 (아래에 코멘트에서). if가 (A falsey 값) 호출자에게 반환되는 undefined에 기술적으로 어떤 결과를 입력하지 않은 경우

당신은 사용자 정의 규칙에서 진정한 반환되지 않습니다.

$.validator.addMethod("regex", function(value, element, regexp) { 
    if ($('#receive_sms_updates').is(':checked')) { 
     var check = false; 
     var re = new RegExp(regexp); 
     return this.optional(element) || re.test(value); 
    } 
    return true; 
}, "Mobile Required"); 

은 다른 사람에게 도움이 될 수 있기 때문에 주변이 부분을 떠나 : 다음과 같이 규칙을 업데이트

다음과 같이 나는 당신의 validate 호출 해와 규칙을 업데이트 :

$.validator.addMethod("regex", function(value, element, regexp) { 
    var re = new RegExp(regexp); 
    return this.optional(element) || re.test(value); 
}, "Mobile Required"); 

$("form#patient-detials").validate({ 
    rules: { 
     'patient[person_attributes][phone_mobile]': { 
      maxlength: 10, 
      minlength: 10, 
      digits: true, 
      regex: "^04[0-9]{8}", 
      required: "#receive_sms_updates:checked" 
     } 
    } 
}); 

보시다시피, required 속성에는 모바일 필드가 필요한지 여부를 결정하는 데 사용되는 "종속성 표현식"이 사용됩니다 (#receive_sms_updates이 선택되었는지 여부에 따라 다름). 여기

은 예입니다 : http://jsfiddle.net/andrewwhitaker/ED6cX/

---

가 나는 규칙 자체에서 "모바일 필수"방법을 제거하는 것이 좋습니다, 단지 하나의 작은 단계 더 가져가 (당신은 재사용 가능한 정규식 규칙을 원하는 결국) 유효성 검사 호출의 messages 속성에 배치합니다. 같은 뭔가 :

$.validator.addMethod("regex", function(value, element, regexp) { 
    var re = new RegExp(regexp); 
    return this.optional(element) || re.test(value); 
}); 

$("form#patient-detials").validate({ 
    rules: { 
     'patient[person_attributes][phone_mobile]': { 
      maxlength: 10, 
      minlength: 10, 
      digits: true, 
      regex: "^04[0-9]{8}", 
      required: "#receive_sms_updates:checked" 
     } 
    }, 
    messages: { 
     'patient[person_attributes][phone_mobile]': { 
      required: "Mobile Required", 
      regex: "Please enter a valid mobile number" 
     } 
    } 
}); 

예 :http://jsfiddle.net/andrewwhitaker/5BVCK/

이 방법은 특정 양식 (이것은 다른 분야에 적용 할 수있을만큼 충분히 일반적 (generic)입니다) 유효성 검사 규칙을 제한하지 않습니다.