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 Validate плагин, что если дата ввода, то это правильно?

Похоже, что я должен создать поля 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

Вы на право track-- Вам необходимо пройти Date номера конструктор вместо строк (val будет возвращать строки). Вы можете также использовать в params аргумент к пользовательскому правилу, чтобы сделать его немного более расширяемый (не специфичны для трех полей с определенными id ы):

$.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 только для группировки ошибки сообщений (поэтому вам по-прежнему необходимо определить правила проверки для каждого входа).

Пример:http://jsbin.com/oqawaz/9

+0

Спасибо, это работает отлично. Есть ли способ ссылаться на 'groups' вместо создания и использования DateFields? –

+0

@ LA_: Простой способ сделать это - использовать тот же массив в 'DateFields' и присвоить свойство' groups' - см. Мой обновленный ответ. –

+0

Хм, найдена одна ошибка с этим кодом - если пользователь вводит день и месяц, но не имеет год ввода, то он считается действительным (поскольку элемент года не является обязательным), но он не должен быть ни полной, ни ничто , –

Смежные вопросы