2012-02-09 3 views
2

내가 날짜 입력을위한 3 개 필드가 :3 필드에서 날짜 입력의 유효성을 검사하는 방법은 무엇입니까?

<input type="text" id="passport-doi-1" name="passport-doi-1" placeholder="DD" maxlength="2"> 
<input type="text" id="passport-doi-2" name="passport-doi-2" placeholder="MM" maxlength="2"> 
<input type="text" id="passport-doi-3" name="passport-doi-3" placeholder="YYYY" maxlength="4"> 

내가 날짜를 입력하는 경우, 다음이 올바른지 jQuery를 검증 플러그인으로 확인하는 방법?

필드의 groups (하나의 오류 메시지 만 있음)을 만든 다음 사용자 지정 유효성 검사 규칙을 만들어야하는 것처럼 보입니다. 그러나 그것이 어떻게 보일 것인가?

업데이트. 나는 다음을 수행하려고 노력했지만, 그것은 작동하지 않습니다

$.validator.addMethod('validDate', function (value, element) { 
    var dd = $("#passport-doi-dd").val(); 
    var mm = $("#passport-doi-mm").val(); 
    var yyyy = $("#passport-doi-yyyy").val(); 
    if (dd=="" && mm=="" && yyyy=="") return true; 
    try { 
    var date = new Date(yyyy,mm-1,dd,0,0,0,0); 
    return mm===(date.getMonth()+1) && dd===date.getDate() && yyyy===date.getFullYear(); 
    } 
    catch(er) { 
    return false; 
    } 
}, 'Please use format DD MM YYYY.'); 

    ... 
    rules: { 
    "passport-doi-dd": { 
     required: false, 
     validDate: true, 
     range: [1, 31] 
    }, 
    "passport-doi-mm": { 
     required: false, 
     validDate: true, 
     range: [1, 12] 
    }, 
    "passport-doi-yyyy": { 
     required: false, 
     validDate: true, 
     range: [1990, 2012] 
    } 
    }, 
    messages: { 
    "passport-doi-dd": "Please use format DD MM YYYY.", 
    "passport-doi-mm": "Please use format DD MM YYYY.", 
    "passport-doi-yyyy": "Please use format DD MM YYYY." 
    } 

답변

2

당신은 당신이 (val 문자열을 반환합니다) 문자열 대신 Date 생성자 번호를 전달해야 track-- 오른쪽에 있습니다. 단지 오류를 그룹화

$.validator.addMethod("multidate", function (value, element, params) { 
    var daySelector = params[0] 
     , monthSelector = params[1] 
     , yearSelector = params[2] 
     , day = parseInt($(daySelector).val(), 10) 
     , month = parseInt($(monthSelector).val(), 10) 
     , year = parseInt($(yearSelector).val(), 10) 
     , date = new Date(year, month, day); 

    return (!$(daySelector).val() && !$(monthSelector).val() && !$(yearSelector).val()) || 
    !isNaN(date.getTime()); 

}); 


$(document).ready(function() { 
    var dateFields = ["#passport-doi-1", "#passport-doi-2", "#passport-doi-3"]; 
    $("#dateform").validate({ 
    errorLabelContainer: "#errors", 
    groups: { 
     date: dateFields.join("") 
    }, 
    rules: { 
     "passport-doi-1": { 
     multidate: dateFields 
     }, 
     "passport-doi-2": { 
     multidate: dateFields 
     }, 
     "passport-doi-3": { 
     multidate: dateFields 
     } 
    }, 
    messages: { 
     "passport-doi-1": { 
     multidate: "Please enter a valid date" 
     }, 
     "passport-doi-2": { 
     multidate: "Please enter a valid date" 
     }, 
     "passport-doi-3": { 
     multidate: "Please enter a valid date" 
     } 
    } 
    }); 
}); 

내가group 옵션을 생각 : 당신은 또한 (특정 id의 세 가지 분야에 국한되지) 좀 더 확장하기 위해 사용자 정의 규칙에 params 인수를 활용할 수 있습니다 메시지 (각 입력에 대한 유효성 검사 규칙을 정의해야합니다).

예 :http://jsbin.com/oqawaz/9

+0

덕분에, 그것은 완벽하게 작동합니다. 'dateFields' 생성 및 사용 대신에'groups'를 참조 할 수있는 방법이 있습니까? –

+0

@ LA : 쉬운 방법은'dateFields'에 같은 배열을 사용하고'groups' 속성을 할당하는 것입니다. 업데이트 된 대답을 참조하십시오. –

+0

흠,이 코드에 버그가 하나 있음 - 사용자가 요일과 월을 입력했지만 연도를 입력하지 않은 경우 유효 기간으로 처리됨 (연도 요소가 선택 사항이기 때문에) - 전체 날짜 또는 아무것도 아니어야 함 . –

관련 문제