2015-01-16 2 views
0

사용자 선택에 따라 유효성 검사를 사용하지 않고 사용하도록 설정하려고합니다. 내 솔루션에 사용자가 시작 또는 종료 날짜를 입력하는 경우에만 유효성을 싶습니다. 지금까지 part of my solution code을 보면 몇 가지 유효성 검사가 있습니다. 나는 그것이 작동하는 데 필요한 몇 가지 시나리오를 내려 놓을 것이다. (작업)검도 UI 유효성 검사 - 사용 안 함/사용 가능

시나리오 1 날짜를 입력 나던

사용자는 Validaion이 필요하지

시나리오 2

사용자는 시작 또는 끝 날짜를 입력 (작업). 그러면 텍스트 상자의 유효성이 검사됩니다.

시나리오 3 (작동하지 않음)

사용자가 시작 및 종료 날짜를 입력합니다. 검색을 클릭하십시오. 그런 다음 두 날짜 필드를 모두 지우고 유효성 검사를 통해이 두 텍스트 상자에 표시됩니다. 이 시점에서 유효성 검사를 숨기고 싶습니다. 지금까지이 작업을 수행 할 수있는 유일한 방법은 텍스트 상자를 지우고 다시 검색을 수행하는 것입니다.

미리 감사드립니다.

답변

1

는 날짜를 입력 한 및 날짜 선택 필드가 비어있는 경우 검도에서 모든 검증 라벨을 숨길 경우 광산 만의 유효성을 확인이 link

참조하십시오.

광산이 양식을 성공으로 게시하는 것을 제외하고는 위에서 설명한 시나리오를 충족합니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css"> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> 
</head> 
<body> 

<form id="myform"> 
    <input name="myDate" class="validateDate" id="startDate" /> <br /> 
    <input name="myDate" class="validateDate" id="endDate" /> 
    <button>Validate</button> 
</form> 

<script> 
    $("#myform").kendoValidator({ 
     rules: { 
     dateValidation: function(input) { 
      //only validate 
      if (input.hasClass('validateDate')) { 
      if(input.val() !== ""){ 
       return kendo.parseDate(input.val(), "dd/MM/yyyy"); 
      } 
      else{ 
       input.siblings("span.k-tooltip-validation").hide(); 
       return true; 
      } 
      } 
     } 
     }, 
     messages: { 
     dateValidation: "Please enter a date in the format dd/mm/yyyy" 
     } 
    }); 
    $("#startDate, #endDate").kendoDatePicker({ format: "dd/MM/yyyy", culture: "en-GB" }) 
</script> 
</body> 
</html> 
관련 문제