2016-08-07 7 views
0

현재 jQuery 유효성 검사기 플러그인으로 유효성을 검사하는 양식이 있습니다. 양식 내에서 필자는 하나의 입력란을 가지며, 입력란에 따라 다른 입력란에 따라 필요 여부를 결정합니다.jQuery 유효성 검사가 올바르지 않음

<select name="supportiveServices" id="supportiveServices" style="float: left; margin-left: 20px; width: 30%;"> 
     <option value="">Select One</option> 
     <option value="Accepted">Accepted</option> 
     <option value="Declined">Declined</option> 
    </select> 


<input name= "serviceStartDate" id= "serviceStartDate" type="date" style="width: 50%;"></input> 

jQuery를

serviceStartDate: { 
      required: function(element) { 
       if($("#supportiveServices").val() == 'Accepted') { 
        return true; 
       } 
       else { 
        return false; 
       } 
      }, 

     }, 

이 종속성 요구 사항은 잘 작동하는 것 같다하지만 지속적으로 실행하고 문제는 나뿐만 아니라 유효로 날짜를 필요로 I입니다. 날짜가 맞는지 확인하는 방법을 추가했습니다.

jQuery.validator.addMethod("DateFormat", 
    function(value, element) { 
    return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); 
}, 
    "Please enter a date in the format dd/mm/yyyy"; 
); 

나는이 플러그인에 새로운 오전하지만 난 true를 반환하고 필요 둘 다 다음과 같은 두 가지 솔루션을 시도 입력 : 날짜가 비어있는 경우

  1. 은 기본적으로 true를 반환하는 함수 만들기 그렇지 않다면 거짓.

    serviceStartDate: { 
         required: function(element) { 
          if($("#supportiveServices").val() == 'Accepted') { 
           return true; 
          } 
          else { 
           return false; 
          } 
         }, 
    
         DateFormat: function(element) { 
          if($("#serviceStartDate").val() != 0 || $("#serviceStartDate").val() != null || $("#serviceStartDate").val() != undefined || $("#serviceStartDate").val() != '') { 
           return true; 
          } else { 
           return false; 
          } 
         } 
    
        }, 
    
  2. 별도의 메소드를 생성하십시오.

    jQuery.validator.addMethod("DateFormatSupport", 
         function(value, element) { 
         if ($("#serviceStartDate") == 0) { 
         return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); 
         } 
        }, 
        "Please enter a date in the format dd/mm/yyyy"//removed ; 
        ); 
    

하고 호출.

 serviceStartDate: { 
      required: function(element) { 
       if($("#supportiveServices").val() == 'Accepted') { 
        return true; 
       } 
       else { 
        return false; 
       } 
      }, 

      DateFormatSupport: true 
      } 

     }, 

나는 기본적으로 클라이언트 지원 서비스에 대한 "허용"을 선택하지 않는 경우, 다음 serviceStartDate는 선택 사양 일 수 있다는 것을 확인하기 위해 검증이 필요합니다. 지원 서비스를 받기 위해 "수락 됨"이 선택되면 serviceStartDate를 기입해야하며 날짜도 유효해야합니다. 예를 들어 serviceStartDate의 내용이 선택 사항인지 아닌지 여부를 날짜로 기입하면 예방 조치입니다. 이것은 데이터베이스에 있으므로 null 또는 날짜 여야합니다.

어떤 조언이 필요합니까?

+0

이미 플러그인에 내장 된'date' 규칙을 사용해 보셨습니까? – Sparky

답변

0

serviceStartDate에있는 항목을 모두 입력했으면 좋든 싫든간에 날짜가 되길 원합니다 ... 조언이 있으십니까?

당신은 단지 선언 할 필요가 내장 된 날짜 필드에 date 규칙, 이미했던대로 select 요소시 required 규칙에 의존을하는 동안. 이 상황에서는 맞춤 규칙이 필요하지 않습니다. (선택 사항) 필드를 비워두면 모든 규칙이 자동으로 무시되므로 date 규칙을 조건부로 만들 필요가 없습니다.

rules: { 
    supportiveServices: { 
     required: true 
    }, 
    serviceStartDate: { 
     required: function(element) { 
      return ($("#supportiveServices").val() == 'Accepted') ? true : false; 
     }, 
     date: true 
    } 
} 

근무 DEMO : jsfiddle.net/y1Lytetm/

참고 :

나는 당신의 조건에 대한 ternary shorthand을 사용
  • ...이 여섯 교체 한 줄의 코드가 있습니다.

  • input용기 요소 같은 건 없다, 그래서 나는 유효한 HTML을 존재하지 않는 닫는 </input> 태그를 제거했습니다.

관련 문제