1

生年月日を検証するために別のエラーメッセージを表示したい。年齢が 13 歳未満の場合にエラー メッセージを個別に表示したい。年齢を計算するための jquery validae addmethod があります。次のコードを見つけて、年齢を検証するためのエラー メッセージを表示する方法を提案してください。

$.validator.addMethod("check_date_of_birth", function(value, element) {

        var day = $("#dob_date").val();
        var month = $("#dob_month").val();
        var year = $("#dob_year").val();
        var age =  13;

        var mydate = new Date();
        mydate.setFullYear(year, month-1, day);

        var currdate = new Date();
        currdate.setFullYear(currdate.getFullYear() - age);

        return currdate > mydate;

    }, 'Age should not be less than 13');

$('#form').validate({

groups: {
             dob: "dob_date dob_month dob_year"
            },

rules: {
            sex      : "required",
            name     : "required",
            dob_date : { required: true },
            dob_month: { required: true },
            dob_year : { required: true, check_date_of_birth: true },
       },

messages: {
            sex      : "Choose gender",
            name     : "Enter name",
            dob_date : "Please select date/month/year",
            dob_month: "Please select date/month/year",
            dob_year : "Please select date/month/year",
          },
});

HTML

<div data-role="fieldcontain">
                    <legend><span lang="en">Date of Birth</span></legend>
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <div id="id-error">
                            <label for="dob" class="error" generated="true"></label>
                        </div>
                        <select name="dob_date" id="dob_date" ></select>
                        <select name="dob_month" id="dob_month"></select>
                        <select name="dob_year" id="dob_year"></select>
                    </fieldset>
                </div>

上記の HTML ラベル「dob」では、13 歳未満の年齢を入力すると、「日付/月/年を選択してください」というメッセージが常に表示されます。13 歳未満を選択すると、別のエラー メッセージが表示されます。同じ入力フィールドの新しいエラー メッセージを取得するために変更する場所。

4

2 に答える 2

0

別のアプローチは、13 歳以下で選択できる生年月日に関するすべてのオプションを削除することです。

HTML

<div data-role="fieldcontain">
    <legend><span lang="en">Date of Birth</span>
    </legend>
    <fieldset data-role="controlgroup" data-type="horizontal">
        <div id="id-error">
            <label for="dob" class="error" generated="true"></label>
        </div>
        <select name="dob_date" id="dob_date"></select>
        <select name="dob_month" id="dob_month"></select>
        <select name="dob_year" id="dob_year"></select>
    </fieldset>
</div>

JS

var month = [];

// set the names of the months 
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

var date = new Date();
var ageRestriction = 13;
var day = date.getDate();
//var month = month[date.getMonth()];

// set restriction
date.setFullYear(date.getFullYear() - ageRestriction);
var year = date.getFullYear();

var dayOptions = [];
$.each(new Array(31), function(n) { 
    n = n + 1; // offset by 1
    if (day > n) {
        dayOptions.push('<option value="'+ n +'" disabled="disabled">'+ n +'</option>');
    } else {
        dayOptions.push('<option value="'+ n +'">'+ n +'</option>');
    }    
});

var monthOptions = [];
$.each(new Array(12), function(n) { 
    if (date.getMonth() > n) {
        monthOptions.push('<option value="'+ (n + 1) +'" disabled="disabled">'+ month[n] +'</option>');
    } else {
        monthOptions.push('<option value="'+ (n + 1) +'">'+ month[n] +'</option>');
    }    
});

var yearOptions = [];
$.each(new Array(year), function(n) { 
    n = n + 1900;
    if (year >= n) {
        yearOptions.push('<option value="'+ n +'">'+ n +'</option>');
    }    
});

$('#dob_date').html(dayOptions.join(''));
$('#dob_month').html(monthOptions.join(''));
$('#dob_year').html(yearOptions.reverse().join(''));

$('#dob_date').on('change', function() {
    isValidDOB(date);
});

function isValidDOB(date)
{
    var selectedDate = $('#dob_date').val();
    var selectedMonth = $('#dob_month').val();
    var selectedYear = $('#dob_year').val();

    userSelectedDOB = new Date(selectedYear+"/"+selectedMonth+"/"+selectedDate);

    if (date.getMonth() != userSelectedDOB.getMonth()) {
        alert('Day selected out of range for Month');
        return false;
    }

    if (userSelectedDOB.valid()) {         
        return true;
    }
    return false;
}

これは単なる実例であるため、最適化できます

ところで isValidDOB 関数は正しく動作していません。例としてだけあります

于 2013-02-08T14:39:27.137 に答える
0

あなたのコード:

rules: {
    // your other rules,
    dob_year : { 
        required: true,
        check_date_of_birth: true
    },
},
messages: {
    // other messsages,
    dob_year : "Please select date/month/year",
},

フィールドについては、 2 つのルールdob_yearに対して 1 つのメッセージのみを宣言しました。

各ルールに対応するメッセージを明示的に指定するだけです:

messages: {
    // your other messsages,
    dob_year: {
        required: "Please select date/month/year",
        check_date_of_birth: "you are not yet 13"
    }
},

実際のデモ: http://jsfiddle.net/9x6Lb/

于 2013-02-08T14:41:25.200 に答える