在jQuery表单验证器中为一个字段显示不同的错误消息

Question

我想显示不同的错误消息以验证出生日期。 我想在年龄低于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岁以下的年龄，我想显示另一个错误消息。 对于相同的输入字段，在何处进行更改以获取新的错误消息。

Answer 1

另一种方法是删除可以为13岁或以下年龄选择的DOB的所有选项。

• http://jsfiddle.net/7dNVR/

的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函数无法正常工作，仅作为示例

Answer 2

您的代码：

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

对于dob_year字段，您只为两个规则声明了一条消息。

您只需要为每个规则明确指定相应的消息：

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/